import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from "@/components/ui/card";

export type StatItem = {
  label: string;
  value: string;
  change?: string;
  trend?: "up" | "down";
  helper?: string;
};

export type StatsGridProps = {
  title?: string;
  description?: string;
  items: StatItem[];
};

export function StatsGrid({ title, description, items }: StatsGridProps) {
  return (
    <div className="space-y-4">
      {title ? (
        <div className="space-y-1">
          <p className="text-sm font-semibold">{title}</p>
          {description ? (
            <p className="text-sm text-muted-foreground">{description}</p>
          ) : null}
        </div>
      ) : null}

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {items.map((item) => (
          <Card key={item.label} className="h-full">
            <CardHeader className="space-y-2 pb-2">
              <CardDescription className="text-xs uppercase tracking-[0.2em]">
                {item.label}
              </CardDescription>
              <CardTitle className="text-2xl">{item.value}</CardTitle>
            </CardHeader>
            <CardContent className="flex items-center justify-between">
              <span className="text-xs text-muted-foreground">
                {item.helper ?? "Ultimos 30 dias"}
              </span>
              {item.change ? (
                <Badge
                  variant="outline"
                  className={
                    item.trend === "down"
                      ? "border-destructive/40 text-destructive"
                      : "border-primary/40 text-primary"
                  }
                >
                  {item.change}
                </Badge>
              ) : null}
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
24.8k

4.2%

$8.2k

62%
