import { ZoneOverviewCard } from '@/components/zones-of-regulation/ZoneOverviewCard';
import type {
  ZoneColor,
  ZoneInfo,
} from '@/shared/types/app';

interface ZonesOverviewGridProps {
  readonly zones: readonly ZoneInfo[];
  readonly expandedZone: ZoneColor | null;
  readonly onToggleZone: (zone: ZoneColor) => void;
}

export function ZonesOverviewGrid({
  zones,
  expandedZone,
  onToggleZone,
}: ZonesOverviewGridProps) {
  return (
    <section className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {zones.map((zone) => (
        <ZoneOverviewCard
          key={zone.color}
          zone={zone}
          expandedZone={expandedZone}
          onToggle={onToggleZone}
        />
      ))}
    </section>
  );
}
