import { Sparkles, TrendingUp, Clapperboard, Heart } from "lucide-react";

interface StatCardsProps {
  totalGenerations: number;
  usageCount:       number;
  usageLimit:       number;
  storyboardCount:  number;
  favoritesCount:   number;
}

export function StatCards({
  totalGenerations,
  usageCount,
  usageLimit,
  storyboardCount,
  favoritesCount,
}: StatCardsProps) {
  const cards = [
    {
      label: "Total Generasi",
      value: String(totalGenerations),
      icon:  <Sparkles className="w-5 h-5" />,
      accent: "#7c3aed",
    },
    {
      label: "Sisa Kuota",
      value: String(usageLimit - usageCount),
      icon:  <TrendingUp className="w-5 h-5" />,
      accent: "#06b6d4",
    },
    {
      label: "Storyboard",
      value: String(storyboardCount),
      icon:  <Clapperboard className="w-5 h-5" />,
      accent: "#8b5cf6",
    },
    {
      label: "Favorit",
      value: String(favoritesCount),
      icon:  <Heart className="w-5 h-5" />,
      accent: "#ec4899",
    },
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
      {cards.map((card) => (
        <div
          key={card.label}
          className="rounded-2xl p-4 relative overflow-hidden"
          style={{
            background: `linear-gradient(135deg, ${card.accent}18, ${card.accent}08)`,
            border:     `1px solid ${card.accent}30`,
          }}
        >
          <div
            className="absolute -top-4 -right-4 w-16 h-16 rounded-full opacity-20 blur-xl"
            style={{ background: card.accent }}
          />
          <div style={{ color: card.accent }} className="mb-2">{card.icon}</div>
          <div className="text-2xl font-bold truncate">{card.value}</div>
          <div className="text-xs text-muted-foreground mt-0.5">{card.label}</div>
        </div>
      ))}
    </div>
  );
}
