import { ArrowUp, Info } from "lucide-react";
import { useState } from "react";


// Reusable Metric Card Component
const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChange, size, extraStyle, disabled }: { icon?: any, img?: any, value?: any, label?: any, tooltipText?: any, valueChange?: any, size?: any, extraStyle?: any, disabled?: any }) => {
    const [isHovered, setIsHovered] = useState(false);

    if (Img) {
        return (
            <div className="relative cursor-pointer"
                onMouseEnter={() => setIsHovered(true)}
                onMouseLeave={() => setIsHovered(false)}>
                <div className={`${extraStyle} ${disabled ? "opacity-30" : ""}`}>
                    <img src={Img} alt="Img" className={` ${disabled ? "w-6 2xl:w-6 h-6 2xl:h-6" : "w-6 2xl:w-8 h-6 2xl:h-8"}${value === 'Map' ? ' scale-125' : ""} `} />
                </div>
                <div className="">
                    {isHovered && (
                        <div className="absolute bottom-[150%] left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-fit whitespace-nowrap bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
                            {/* Tooltip triangle */}
                            <div className="absolute -bottom-[40%] left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-t-gray-800"></div>
                            {tooltipText}
                        </div>
                    )}
                </div>

            </div>
        )
    }

    return (
        <div
            className="flex-1 min-w-[50px] bg-white rounded-xl  p-2 flex items-center space-x-2 relative"
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >
            {Icon && (
                <div className="p-3 bg-gray-100 rounded-lg">
                    <Icon size={24} className="text-gray-500" />
                </div>
            )}

            <div className="flex-1">
                <div className={`${size === 'sm' ? 'text-sm border-2 border-gray-200 px-1 rounded-lg' : 'text-xl'} font-bold text-gray-800 flex items-center space-x-2 p-[3px] justify-between `}>
                    <span className="text-sm font-semibold text-[#787B91]">{!tooltipText && label}</span>

                    <span className="text-[#787B91] font-semibold bg-gray-200 px-1 py-0 rounded-md">{value}</span>
                    {valueChange && (
                        <div className="flex items-center text-md font-medium text-[#029056]">
                            {Icon && (
                                <ArrowUp size={14} className="inline-block mr-1" />
                            )}
                            <span>{valueChange}</span>
                        </div>
                    )}

                    {tooltipText && (
                        <div className="flex items-center space-x-1 mt-1 text-gray-500">
                            <span className="text-sm">{label}</span>
                            <div className="relative">
                                <Info size={16} className="text-gray-400 cursor-pointer" />
                                {isHovered && (
                                    <div className="absolute bottom-[150%] left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-fit whitespace-nowrap bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
                                        {/* Tooltip triangle */}
                                        <div className="absolute -bottom-[40%] left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-t-gray-800"></div>
                                        {tooltipText}
                                    </div>
                                )}
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default MetricCard