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 checkedInZone: ZoneColor | null;
  readonly isSaving: boolean;
  readonly errorMessage: string | null;
  readonly onSelectZone: (zone: ZoneColor) => Promise<void>;
}

export function ZonesOverviewGrid({
  zones,
  expandedZone,
  checkedInZone,
  isSaving,
  errorMessage,
  onSelectZone,
}: ZonesOverviewGridProps) {
  return (
    <section className="space-y-3">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {zones.map((zone) => (
          <ZoneOverviewCard
            key={zone.color}
            zone={zone}
            expandedZone={expandedZone}
            checkedInZone={checkedInZone}
            isSaving={isSaving}
            onSelect={onSelectZone}
          />
        ))}
      </div>
      {errorMessage && <p className="text-xs text-red-400">{errorMessage}</p>}
    </section>
  );
}
