import { unwrapSignalOrValue } from ':src/utils.ts'
import { Ensure } from ':types'
import { JSX } from 'preact'

export type PictureProps =
    & { formats: string[] }
    & Ensure<JSX.HTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'loading'>

export function Picture(
    { formats, src, ...props }: PictureProps,
) {
    const groups = unwrapSignalOrValue(src)?.match(/(?<path>.*)(?<ext>\.\w+)/)
        ?.groups
    if (groups === undefined) {
        throw new SyntaxError(`unable to parse path of "${src.valueOf()}"`)
    }

    const { path } = groups

    return (
        <picture>
            {formats.map((format) => (
                <source type={`image/${format}`} srcset={`${path}.${format}`} />
            ))}
            <img src={src} {...props} />
        </picture>
    )
}