import { ParkCard } from './ParkCard';
import { Park } from '@/types/database';

interface ParkGridViewProps {
  parks: Park[];
}

export function ParkGridView({ parks }: ParkGridViewProps) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
      {parks.map((park) => (
        <ParkCard 
          key={park.id} 
          park={park} 
        />
      ))}
    </div>
  );
}