interface MetricCardProps {
    title: string;
    subtitle: string;
    value: string;
    gradient: 'blue-teal' | 'pink-purple' | 'orange-yellow' | 'blue-purple';
    imageUrl?: string;
}

type GradientStyle = {
    backgroundImage?: string;
    background?: string;
};

export function MetricCard({ title, subtitle, value, gradient, imageUrl }: MetricCardProps) {
    const gradientStyles: Record<MetricCardProps['gradient'], GradientStyle> = {
        'blue-teal': {
            backgroundImage: 'linear-gradient(16.03674192372833deg, rgba(0, 27, 47, 1) 10.549%, rgba(6, 38, 168, 1) 30.146%, rgba(3, 154, 152, 1) 77.418%)',
        },
        'pink-purple': {
            background: 'linear-gradient(180deg, #ff708c 0%, #001377 100%)',
        },
        'orange-yellow': {
            background: 'linear-gradient(180deg, #f3696e 0%, #f8a902 100%)',
        },
        'blue-purple': {
            background: 'linear-gradient(180deg, #c336ff 0%, #0033ff 100%)',
        },
    };

    const imageUrls: Record<MetricCardProps['gradient'], string> = {
        'blue-teal': imageUrl || 'https://www.figma.com/api/mcp/asset/57e6c8be-018b-41d3-a71d-d59c115b529c',
        'pink-purple': imageUrl || 'https://www.figma.com/api/mcp/asset/ccb9eb9b-4d2e-417d-b727-8dcd1586344a',
        'orange-yellow': imageUrl || 'https://www.figma.com/api/mcp/asset/63c3ed6f-400a-431e-b3a7-43b6ff3d4eee',
        'blue-purple': imageUrl || 'https://www.figma.com/api/mcp/asset/e5d86ccf-d5ce-4b5e-823a-a01acb631af7',
    };
    
    return (
        <div className="w-full h-full">
            <div
                className="flex flex-col justify-center min-h-[100px] sm:min-h-[110px] md:min-h-[120px] lg:min-h-[120px] p-4 sm:p-5 md:p-6 relative rounded-xl md:rounded-2xl overflow-hidden w-full h-full"
                style={gradientStyles[gradient]}
            >
                {/* Text Content Container */}
                <div className="flex items-center justify-between w-full z-10 text-white gap-2 sm:gap-3 md:gap-4">
                    <div className="flex flex-col items-start flex-1 min-w-0">
                        <p className="font-medium text-[0.625rem] sm:text-[0.6875rem] md:text-[0.75rem] lg:text-[0.875rem] uppercase opacity-80 leading-tight">
                            {title}
                        </p>
                        <p className="capitalize font-semibold text-[0.875rem] sm:text-[1rem] md:text-[1.125rem] lg:text-[1.25rem] truncate w-full mt-0.5 sm:mt-1">
                            {subtitle}
                        </p>
                    </div>
                    <p className="capitalize font-semibold text-[1.5rem] sm:text-[1.75rem] md:text-[2rem] lg:text-[2rem] ml-2 sm:ml-3 md:ml-4 flex-shrink-0">
                        {value}
                    </p>
                </div>

                {/* Image Container - Fixed to the right */}
                <div className="absolute right-0 bottom-0 flex items-center h-full w-12 sm:w-16 md:w-20 pointer-events-none opacity-40 sm:opacity-50">
                    <img
                        alt=""
                        className="object-contain h-full w-full" 
                        src={imageUrls[gradient]}
                    />
                </div>
            </div>
        </div>
    );
}