
import { cn } from "@/lib/utils";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export const StatsCard = ({
    title,
    value,
    icon,
    description,
    className,
    trend,
}) => {
    return (
        <Card className={cn("overflow-hidden border-gray-200", className)}>
            <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
                <CardTitle className="text-sm font-medium text-gray-600">
                    {title}
                </CardTitle>
                <div className="w-5 h-5 text-blue-600">{icon}</div>
            </CardHeader>
            <CardContent>
                <div className="text-2xl font-bold">{value}</div>
                {description && (
                    <p className="text-xs text-gray-500 mt-1">{description}</p>
                )}
                {trend && (
                    <div className="flex items-center mt-2">
                        <span
                            className={cn(
                                "text-xs font-medium",
                                trend.positive ? "text-green-600" : "text-red-600"
                            )}
                        >
                            {trend.positive ? "+" : "-"}
                            {trend.value}
                        </span>
                        <span className="text-xs text-muted-foreground ml-1">from last month</span>
                    </div>
                )}
            </CardContent>
        </Card>
    );
};
