"use client";

import { Users, Building2, Stethoscope, Star } from "lucide-react";

interface Stat {
  id: number;
  icon: string;
  value: string;
  label: string;
}

const ICON_MAP: Record<string, React.ReactNode> = {
  users: <Users className="w-7 h-7 text-green-500" />,
  hospital: <Building2 className="w-7 h-7 text-purple-500" />,
  stethoscope: <Stethoscope className="w-7 h-7 text-blue-500" />,
  star: <Star className="w-7 h-7 text-yellow-500" />,
};

export default function StatsBar({ stats }: { stats: Stat[] }) {
  return (
    <section className="bg-white border-y border-slate-100 py-6">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
          {stats.map((stat, i) => (
            <div
              key={stat.id}
              className="flex items-center gap-3 group animate-fade-in-up"
              style={{ animationDelay: `${i * 100}ms` }}
            >
              <div className="w-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center group-hover:scale-110 transition-transform">
                {ICON_MAP[stat.icon] || <Star className="w-7 h-7 text-slate-400" />}
              </div>
              <div>
                <p className="text-xl font-bold text-slate-900">{stat.value}</p>
                <p className="text-xs text-slate-500">{stat.label}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}