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-blue-50 text-blue-600",
        green: "bg-green-50 text-green-600",
        purple: "bg-purple-50 text-purple-600",
        orange: "bg-orange-50 text-orange-600",
    };

    return (
        <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">
                    {title}
                </CardTitle>
                <div className={`p-2 rounded-lg ${colorStyles[color]}`}>
                    <Icon size={16} />
                </div>
            </CardHeader>
            <CardContent>
                <div className="text-2xl font-bold">{value}</div>
                {change && (
                    <p className="text-xs text-muted-foreground mt-1">
                        <span
                            className={`font-medium ${trend === "up"
                                    ? "text-green-600"
                                    : trend === "down"
                                        ? "text-red-600"
                                        : "text-slate-600"
                                }`}
                        >
                            {change}
                        </span>{" "}
                        vs last month
                    </p>
                )}
            </CardContent>
        </Card>
    );
}
