import { LucideIcon } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface StatsCardProps {
    title: string;
    value: string | number;
    change?: string;
    trend?: "up" | "down" | "neutral";
    icon: LucideIcon;
    color?: "blue" | "green" | "purple" | "orange";
}

export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
    const colorStyles = {
        blue: {
            bg: "from-blue-600 to-blue-700",
            text: "text-white",
            light: "from-blue-600 to-blue-700",
            badge: "bg-blue-400 text-white",
            icon: "bg-white/20 text-white",
        },
        green: {
            bg: "from-emerald-600 to-emerald-700",
            text: "text-white",
            light: "from-emerald-600 to-emerald-700",
            badge: "bg-emerald-400 text-white",
            icon: "bg-white/20 text-white",
        },
        purple: {
            bg: "from-purple-600 to-purple-700",
            text: "text-white",
            light: "from-purple-600 to-purple-700",
            badge: "bg-purple-400 text-white",
            icon: "bg-white/20 text-white",
        },
        orange: {
            bg: "from-orange-600 to-orange-700",
            text: "text-white",
            light: "from-orange-600 to-orange-700",
            badge: "bg-orange-400 text-white",
            icon: "bg-white/20 text-white",
        },
    };

    const styles = colorStyles[color];

    return (
        <Card className={`bg-gradient-to-br ${styles.light} border-0 shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group h-full`}>
            <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3 pt-5 px-5">
                <CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}>
                    {title}
                </CardTitle>
                <div className={`p-1.5 rounded-lg ${styles.icon} flex-shrink-0`}>
                    <Icon size={16} strokeWidth={2} />
                </div>
            </CardHeader>
            <CardContent className="px-5 pb-5 space-y-3">
                <div className={`text-3xl font-black ${styles.text}`}>
                    {value}
                </div>
                {change && (
                    <div className="flex items-center gap-1.5">
                        <span
                            className={`inline-flex items-center gap-0.5 font-bold px-2 py-1 rounded-md text-xs tracking-wide ${styles.badge}`}
                        >
                            {trend === "up" ? "↑" : trend === "down" ? "↓" : "→"} {change}
                        </span>
                        <span className="text-xs text-gray-600">vs month</span>
                    </div>
                )}
            </CardContent>
        </Card>
    );
}