import { Check, Heart } from "lucide-react";

interface StatsGridProps {
  /** 已投艺人数 */
  voted: number;
  /** 剩余票数 */
  remaining: number;
}

export default function StatsGrid({ voted, remaining }: StatsGridProps) {
  const stats: { key: string; label: string; value: number; icon: React.ReactNode }[] = [
    {
      key: "voted",
      label: "已投票数",
      value: voted,
      icon: <Check size={14} strokeWidth={2.5} />,
    },
    {
      key: "remaining",
      label: "剩余票数",
      value: remaining,
      icon: <Heart size={14} fill="currentColor" />,
    },
  ];

  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>
  );
}
