import { Card, CardContent } from "../ui/card";
import { Badge } from "../ui/badge";
import { LucideIcon } from "lucide-react";
import { TrendingUp, TrendingDown } from "lucide-react";
import { cn } from "../ui/utils";

interface StatCardProps {
  label: string;
  value: string | number;
  icon: LucideIcon;
  iconColor?: string;
  trend?: {
    value: string;
    isPositive: boolean;
  };
}

export const StatCard = ({ label, value, icon: Icon, iconColor = "bg-blue-500", trend }: StatCardProps) => {
  return (
    <Card>
      <CardContent className="p-6">
        <div className="flex items-center justify-between mb-4">
          <div className={cn("w-10 h-10 rounded-lg flex items-center justify-center", iconColor)}>
            <Icon className="h-5 w-5 text-white" />
          </div>
          {trend && (
            <Badge variant="secondary" className={trend.isPositive ? "text-green-600" : "text-red-600"}>
              {trend.isPositive ? (
                <TrendingUp className="h-3 w-3 mr-1" />
              ) : (
                <TrendingDown className="h-3 w-3 mr-1" />
              )}
              {trend.value}
            </Badge>
          )}
        </div>
        <p className="text-sm text-muted-foreground">{label}</p>
        <p className="text-2xl font-semibold mt-1">{value}</p>
      </CardContent>
    </Card>
  );
};
