import React from 'react';
import { Eye, Home, Clock, Tv2 } from 'lucide-react';
import type { Stat } from '@/lib/api';

const items = [
  { key: 'owlCount',       label: 'Owls Tracked',     icon: Eye,   unit: '' },
  { key: 'burrowCount',    label: 'Active Burrows',    icon: Home,  unit: '' },
  { key: 'volunteerHours', label: 'Volunteer Hours',   icon: Clock, unit: 'hrs' },
  { key: 'activeStreams',  label: 'Live Cams',         icon: Tv2,   unit: '' },
] as const;

export default function StatsBar({ stats }: { stats: Stat }) {
  return (
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-px bg-white/5 rounded-2xl overflow-hidden border border-white/5">
      {items.map(({ key, label, icon: Icon, unit }) => (
        <div key={key} className="bg-surfaceGreen px-6 py-7 flex flex-col items-center text-center gap-2">
          <Icon size={22} className="text-teal opacity-80" />
          <div className="text-3xl font-black text-gold tabular-nums">
            {stats[key].toLocaleString()}{unit}
          </div>
          <div className="text-xs font-semibold text-stone-400 uppercase tracking-widest">{label}</div>
        </div>
      ))}
    </div>
  );
}