interface SvgProps {
    width?: number;
    height?: number;
    fill?: string;
    className?: string;
    style?: React.CSSProperties;
}

export function Line(props: SvgProps) {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" className={props.className ? props.className : ""} style={props.style ? props.style : undefined}  width={props.width ? props.width : "1000"} height={props.height ? props.height : "1000"} fill={props.fill ? props.fill : "current"} viewBox="0 0 1000 1000">
            <rect id="line" data-name="line" className="cls-1" x="473" y="36" width="27" height="928" rx="13.5" ry="13.5"/>
        </svg>
    )
}

export function Wave(props: SvgProps) {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" className={props.className ? props.className : ""} style={props.style ? props.style : undefined}  width={props.width ? props.width : "1000"} height={props.height ? props.height : "1000"} fill={props.fill ? props.fill : "current"}>
            <path fill-opacity="1" d="M0,96L48,90.7C96,85,192,75,288,101.3C384,128,480,192,576,192C672,192,768,128,864,117.3C960,107,1056,149,1152,170.7C1248,192,1344,192,1392,192L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
            </path>
        </svg>
    )
}

export function Circle(props: SvgProps) {
    const radius = props.width && props.height ? Math.min(props.width, props.height) / 2 : 500;
    const dimension = radius * 2;

    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            className={props.className ? props.className : ""}
            style={{ ...props.style, overflow: 'visible' }}
            width={props.width ? props.width : dimension}
            height={props.height ? props.height : dimension}
            viewBox={`0 0 ${dimension} ${dimension}`}
            fill={props.fill ? props.fill : "current"}
        >
            <circle
                r={radius}
                cx={radius}
                cy={radius}
            />
        </svg>
    );
}

