import { GrowingZone } from '../../lib/vertical-farming/types';
import ZoneDetailCard from './ZoneDetailCard';

interface ZoneGridProps {
  zones: GrowingZone[];
  onZoneSelect?: (zone: GrowingZone) => void;
  selectedZoneId?: string;
}

export default function ZoneGrid({ zones, onZoneSelect, selectedZoneId }: ZoneGridProps) {
  const zonesByLevel = zones.reduce((acc, zone) => {
    if (!acc[zone.level]) {
      acc[zone.level] = [];
    }
    acc[zone.level].push(zone);
    return acc;
  }, {} as Record<number, GrowingZone[]>);

  const levels = Object.keys(zonesByLevel)
    .map(Number)
    .sort((a, b) => b - a);

  return (
    <div className="space-y-6">
      {levels.map(level => (
        <div key={level}>
          <h3 className="text-lg font-semibold text-gray-900 mb-3">
            Level {level}
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {zonesByLevel[level].map(zone => (
              <ZoneDetailCard
                key={zone.id}
                zone={zone}
                onClick={() => onZoneSelect?.(zone)}
                isSelected={selectedZoneId === zone.id}
              />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}