'use client';

import { Service } from '@/src/types/service';
import { ServiceCard } from './ServiceCard';
import { EmptyState } from './EmptyState';

interface ServiceGridProps {
  services: Service[];
}

/**
 * ServiceGrid - Rendert Services in einem responsiven Grid-Layout
 * @param services - Array von Service-Objekten
 */
export function ServiceGrid({ services }: ServiceGridProps) {
  if (services.length === 0) {
    return <EmptyState />;
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      {services.map((service) => (
        <ServiceCard key={service.id} service={service} />
      ))}
    </div>
  );
}