import { Building2, Handshake, Heart, Star } from 'lucide-react';
import type { CommunityServiceWorkflow } from '@/components/community-service/types';

interface CommunityStatsGridProps {
  readonly workflow: CommunityServiceWorkflow;
}

export function CommunityStatsGrid({ workflow }: CommunityStatsGridProps) {
  const stats = [
    {
      label: 'Organizations',
      value: workflow.stats.organizations.toString(),
      color: 'from-green-500 to-emerald-600',
      icon: <Building2 size={18} />,
    },
    {
      label: 'Service Projects',
      value: workflow.stats.serviceProjects.toString(),
      color: 'from-emerald-500 to-teal-600',
      icon: <Heart size={18} />,
    },
    {
      label: 'School Partners',
      value: workflow.stats.schoolPartners.toString(),
      color: 'from-blue-500 to-indigo-600',
      icon: <Handshake size={18} />,
    },
    {
      label: 'Saved',
      value: workflow.stats.saved.toString(),
      color: 'from-amber-500 to-orange-600',
      icon: <Star size={18} />,
    },
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {stats.map((stat) => (
        <div key={stat.label} className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-4">
          <div className="flex items-center gap-3">
            <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${stat.color} flex items-center justify-center text-white shadow-lg`}>
              {stat.icon}
            </div>
            <div>
              <p className="text-2xl font-bold text-white">{stat.value}</p>
              <p className="text-xs text-slate-500">{stat.label}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}
