import React from 'react';
import { ArrowDown } from 'lucide-react';

export default function StatCard({ title, subtitle, value, color, icon: Icon }) {
    const colorClasses = {
        green: 'from-emerald-400 to-emerald-500',
        red: 'from-rose-400 to-rose-500',
        blue: 'from-blue-400 to-blue-500',
    };

    return (
        <div className={`relative overflow-hidden rounded-[2rem] p-8 text-white bg-gradient-to-br shadow-xl shadow-${color}-100 ${colorClasses[color]}`}>
            <div className="relative z-10">
                <div className="bg-white/20 w-10 h-10 rounded-xl flex items-center justify-center mb-6">
                    <Icon size={20} />
                </div>
                <div className="space-y-1">
                    <h3 className="text-4xl font-bold tracking-tight">{value}</h3>
                    <p className="text-white/80 font-medium text-sm">{title}</p>
                    <p className="text-white/50 text-xs font-medium uppercase tracking-wider">{subtitle}</p>
                </div>
            </div>

            {/* Icon Overlay Design */}
            <div className="absolute -right-4 -top-4 bg-white/10 w-32 h-32 rounded-full flex items-center justify-center -rotate-12">
                <div className="bg-white/20 w-10 h-10 rounded-full flex items-center justify-center">
                    <ArrowDown size={20} className="text-white" />
                </div>
            </div>
        </div>
    );
}