
import { cn } from "@/lib/utils"
import * as LucideIcons from "lucide-react"
import { ImageOff, LucideIcon } from 'lucide-react'

export default function Icon({ icon, className }: { icon: string, className?: string }) {
    if (!icon) return <ImageOff className={cn(className, 'text-muted-foreground/80')} />

    const IconDev = LucideIcons[icon as keyof typeof LucideIcons] as LucideIcon
    if (!IconDev) {
        return <ImageOff className={cn(className, 'text-muted-foreground/80')} />;
    }

    return <IconDev className={className} />

}

// Used mostly
export function ImageIcon({ is_icon, value, className }: { is_icon: boolean, value: string, className?: string }) {
    if (is_icon) return <Icon icon={value} className={className} />

    return <img src={value} className={cn("w-6 h-6", className)} />
}


export function IconBox({ icon, className }: { icon: string, className?: string }) {

    if (!icon) return <div className="border rounded-sm p-2 bg-neutral-50  dark:bg-muted  w-fit">
        <ImageOff className="w-6 h-6 text-neutral-400" />
    </div>


    return <div className="border rounded-sm p-2 bg-white  dark:bg-muted  w-fit">
        <Icon icon={icon} className={cn("w-6 h-6 text-blue-400", className)} />
    </div>
}


export function IconUrlBox({ iconUrl, className }: { iconUrl: string, className?: string }) {

    if (!iconUrl) return <div className={cn("border rounded-sm p-2 bg-neutral-50  dark:bg-muted  w-fit", className)}>
        <ImageOff className="w-6 h-6 text-neutral-400" />
    </div>


    return <div className={cn("border rounded-sm p-2 bg-white  dark:bg-muted  w-fit", className)}>
        <img src={iconUrl} className="w-6 h-6" />
    </div>
}



export function ImageUrlIconBox({ icon, iconUrl, className }: { icon: string, iconUrl: string, className?: string }) {

    if (icon) return <IconBox icon={icon} className={className} />

    return <IconUrlBox iconUrl={iconUrl} className={className} />

}


// Used mostly in dahsboard
export function ImageIconBox({ is_icon, value, className }: { is_icon: boolean, value: string, className?: string }) {

    if (is_icon) return <IconBox icon={value} className={className} />

    return <IconUrlBox iconUrl={value} className={className} />

}
