import { WorkshopCard } from "./WorkshopCard";
import type { WorkshopDefinition, WorkshopSlug } from "./workshops";

interface WorkshopGridProps {
  workshops: readonly WorkshopDefinition[];
  onSelect: (slug: WorkshopSlug) => void;
}

/**
 * Phase 10 — responsive grid of WorkshopCards for the Studio home.
 *
 * Spec (§6.2): 3-column grid on >= 1024px, 2-column on >= 640px,
 * 1-column below. 16px gap between cards.
 */
export function WorkshopGrid({ workshops, onSelect }: WorkshopGridProps) {
  return (
    <div
      data-testid="workshop-grid"
      role="list"
      aria-label="Studio workshops"
      className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
    >
      {workshops.map((workshop) => (
        <div key={workshop.slug} role="listitem">
          <WorkshopCard workshop={workshop} onSelect={onSelect} />
        </div>
      ))}
    </div>
  );
}
