import { cn } from "@/lib/utils";
import type { WorkshopDefinition } from "./workshops";

interface WorkshopCardProps {
  workshop: WorkshopDefinition;
  onSelect: (slug: WorkshopDefinition["slug"]) => void;
}

/**
 * Phase 10 — single card rendered inside WorkshopGrid.
 *
 * Spec (§6.2 of the layout overhaul):
 * - 1px charcoal border, 8px radius, transparent fill idle, near-black
 *   bg-card on hover (120ms transition).
 * - 24px padding, Lucide icon 32x32 volt top-right.
 * - Title Inter 700 uppercase 24px white, subtitle Inter 400 14px silver.
 * - Click navigates to the workshop detail — handled by the parent via
 *   `onSelect`, which receives the workshop slug.
 */
export function WorkshopCard({ workshop, onSelect }: WorkshopCardProps) {
  const Icon = workshop.icon;

  return (
    <button
      type="button"
      data-testid={`workshop-card-${workshop.slug}`}
      aria-label={`${workshop.title} workshop`}
      onClick={() => onSelect(workshop.slug)}
      className={cn(
        "group relative flex w-full flex-col items-start gap-3 overflow-hidden",
        "rounded-lg border border-border bg-transparent p-6 text-left",
        "transition-colors duration-[120ms] ease-out",
        "hover:bg-card",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
      )}
    >
      <Icon
        aria-hidden="true"
        className="absolute right-6 top-6 h-8 w-8 text-primary"
        strokeWidth={1.5}
      />
      <h2 className="pr-12 text-[24px] font-bold uppercase leading-tight tracking-tight text-foreground">
        {workshop.title}
      </h2>
      <p className="text-[14px] font-normal text-muted-foreground">
        {workshop.subtitle}
      </p>
    </button>
  );
}
