"use client";

import { icons } from 'lucide-react';
import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "./tooltip";

export const Icon = ({ name = "FileQuestion", color = "white", size = 16, tooltip = null, ...props }) => {
    const icon = Object.keys(icons).find((i) => i.toLowerCase() == (name.toLowerCase()));
    if (icon) {
        const LucideIcon = icons[icon as keyof typeof icons]; // Add an index signature to allow indexing with a string
        const ret = <LucideIcon color={color} size={size} {...props} />;

        if (tooltip) {
            return (<Tooltip delayDuration={200}>
                <TooltipTrigger asChild>
                    {ret}
                </TooltipTrigger>
                <TooltipPortal>
                    <TooltipContent>{tooltip}</TooltipContent>
                </TooltipPortal>
            </Tooltip>);
        }
        else {
            return ret;
        }
    }
};