import { Sparkles, Star } from "lucide-react";

interface StatsGridProps {
  /** 我累计投出的总票数 */
  totalVotes: number;
  /** 我应援的艺人数（去重） */
  supportingCount: number;
}

export default function StatsGrid({
  totalVotes,
  supportingCount,
}: StatsGridProps) {
  const stats: { key: string; label: string; value: number; icon: React.ReactNode }[] = [
    {
      key: "votes",
      label: "累计投票",
      value: totalVotes,
      icon: <Sparkles size={14} />,
    },
    {
      key: "fan",
      label: "应援艺人",
      value: supportingCount,
      icon: <Star size={14} />,
    },
  ];

  return (
    <div className="grid grid-cols-2 gap-2 sm:gap-3">
      {stats.map((s) => (
        <div
          key={s.key}
          className="relative overflow-hidden bg-surface/60 border border-white/[0.08] rounded-xl px-4 py-4 flex items-center gap-3 hover:border-purple-500/30 transition-colors"
        >
          <span
            aria-hidden
            className="w-10 h-10 rounded-full bg-purple-500/15 border border-purple-500/30 flex items-center justify-center text-purple-300 flex-shrink-0"
          >
            {s.icon}
          </span>
          <div className="min-w-0">
            <div className="font-display text-2xl text-white tabular-nums leading-none">
              {s.value}
            </div>
            <div className="mt-1 text-[11px] text-white/55">{s.label}</div>
          </div>
        </div>
      ))}
    </div>
  );
}
