/**
 * Metric Card Component
 * @description Displays metric information with gradient background
 */

/**
 * MetricCard component props
 */
interface MetricCardProps {
    title: string;
    subtitle: string;
    value: string;
    gradient: 'blue-teal' | 'pink-purple' | 'orange-yellow' | 'blue-purple';
}

/**
 * MetricCard component
 * @description Card showing metric with gradient background and premium styling
 * @param props - Component props
 * @returns MetricCard element
 */
export function MetricCard({ title, subtitle, value, gradient }: MetricCardProps) {
    const gradients = {
        'blue-teal': '  bg-gradient-to-br from-[#001B2F] via-[#0626A8] to-[#039A98] text-white ',
        'pink-purple': 'bg-gradient-to-br from-[#FF6B8B] via-[#944D8F] to-[#51459E]',
        'orange-yellow': 'bg-gradient-to-br from-[#FF9D42] to-[#F17E31]',
        'blue-purple': 'bg-gradient-to-br from-[#2D5BFF] to-[#8E34FF]',
    };

    // return (
    //     <div className={`${gradients[gradient]} rounded-[24px] p-6 text-white card-hover cursor-pointer relative overflow-hidden h-[120px] group transition-all duration-300`}>
    //         {/* Right side decorative vertical bar */}
    //         <div className="absolute right-0 top-0 bottom-0 w-[28%] bg-white/10 backdrop-blur-[2px]" />

    //         <div className="flex justify-between items-center h-full relative z-10 font-['Poppins']">
    //             <div className="flex flex-col justify-center">
    //                 <p className="text-[11px] font-semibold tracking-wider opacity-90 uppercase mb-0.5">
    //                     {title}
    //                 </p>
    //                 <h3 className="text-[22px] font-bold leading-tight">
    //                     {subtitle}
    //                 </h3>
    //             </div>

    //             <div className="flex items-center justify-center min-w-[60px]">
    //                 <span className="text-[48px] font-bold tracking-tighter leading-none">
    //                     {value}
    //                 </span>
    //             </div>
    //         </div>
    //     </div>
    // );
    return (
        <div className={`p-6 h-[110px] rounded-2xl ${gradients[gradient]} w-full `}>
            <div className="flex items-center justify-between w-full ">
                <div className="flex flex-col">
                    <span className="text-[12px] font-medium text-white uppercase tracking-wider">
                        {title}
                    </span>
                    <span className="text-[18px] font-bold mt-1 text-white">
                        {subtitle}
                    </span>
                </div>
                <div className="text-5xl font-bold text-white">
                    {value}
                </div>
            </div>
        </div>
    );
}


