import classNames from "classnames"
import type { PropsWithChildren } from "react"

const icons = {
    'feat': (classNames: string) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className={classNames}>
        <path fillRule="evenodd" d="M15 8A7 7 0 1 0 1 8a7 7 0 0 0 14 0ZM4.75 7.25a.75.75 0 0 0 0 1.5h4.69L8.22 9.97a.75.75 0 1 0 1.06 1.06l2.5-2.5a.75.75 0 0 0 0-1.06l-2.5-2.5a.75.75 0 0 0-1.06 1.06l1.22 1.22H4.75Z" clipRule="evenodd" />
    </svg>,
    'warning': (classNames: string) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className={classNames}>
        <path fillRule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clipRule="evenodd" />
    </svg>,
}

const defaultIcon = icons['warning']
export type InlineWarningProps = PropsWithChildren<{
    size?: 'small' | 'normal' // normal is still small this is meant to be a small inline out-of-the-way warning label,
    icon?: keyof typeof icons
}>
export const InlineWarning = ({ size = 'normal', icon, children }: InlineWarningProps) => {

    return <div className={classNames('flex items-center gap-1 text-gray-700/50', {
        'text-smaller-1 leading-4': size === 'normal',
        'text-smaller-2': size === 'small'
    })}>
        {(icon ? (icons[icon] || defaultIcon) : defaultIcon)(classNames({
            "min-w-4 max-w-4 min-h-4 max-h-4": size === 'normal',
            "min-w-3 max-w-3 min-h-3 max-h-3": size === 'small'
        }))}    
        {children}
    </div>
}