import Link from 'next/link';
import { ElectionStat } from '../../dashboard.type';

export const ElectionStatsGrid = ({ stats }: { stats: ElectionStat[] }) => {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
      {stats.map((stat) => (
        <Link
          key={stat.id}
          href={stat.href}
          className={`bg-linear-to-br ${stat.gradient} text-white p-6 rounded-2xl shadow-lg cursor-pointer hover:scale-105 hover:shadow-xl transition-all duration-300`}
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-white/80 text-sm">{stat.title}</p>
              <p className="text-3xl font-bold">{stat.value}</p>
            </div>
            <span className="material-symbols-outlined text-4xl text-white/70">{stat.icon}</span>
          </div>
          <div
            className={`mt-3 pt-3 border-t ${stat.borderColor} flex items-center gap-1 text-white/80 text-xs`}
          >
            <span>{stat.linkText}</span>
            <span className="material-symbols-outlined text-sm">arrow_forward</span>
          </div>
        </Link>
      ))}
    </div>
  );
};