import React, {ComponentProps, FC} from "react"

const SVGSkeleton: FC<SVGSkeletonProps> = ({paths, viewBox = "0 0 24 24", className = "", title = null, ...props}) => {
    return <svg xmlns="http://www.w3.org/2000/svg"
                viewBox={viewBox}
                fill="currentColor"
                className={className}
                {...props}>
        {title && <title>{ title }</title>}
        {paths}
    </svg>
}

interface SVGSkeletonProps {
    paths: string,
    viewBox?: string,
    className?: string,
    title?: string,
}

export const DraggableSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
    paths: <path d="M5 15q-.425 0-.712-.288T4 14q0-.425.288-.712T5 13h14q.425 0 .713.288T20 14q0 .425-.288.713T19 15zm0-4q-.425 0-.712-.288T4 10q0-.425.288-.712T5 9h14q.425 0 .713.288T20 10q0 .425-.288.713T19 11z"/>,
    ...props
})

export const EditSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
    viewBox: "0 0 576 512",
    paths: <path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z" />,
    ...props
})

export const PauseSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
    paths: <path d="M16 19q-.825 0-1.412-.587T14 17V7q0-.825.588-1.412T16 5q.825 0 1.413.588T18 7v10q0 .825-.587 1.413T16 19m-8 0q-.825 0-1.412-.587T6 17V7q0-.825.588-1.412T8 5q.825 0 1.413.588T10 7v10q0 .825-.587 1.413T8 19"/>,
    ...props
})
export const PlaySVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
    viewBox: "0 0 448 512",
    paths: <path
        d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"/>,
    ...props
})

export const StopSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
    paths: <path d="M8 16h8V8H8zm4 6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22"/>,
    ...props
})
