"use client";

import type { LucideIcon } from "lucide-react";

import type { SceneTransition } from "@/lib/studio-types";
import { cn } from "@/lib/utils";

interface TransitionPreviewTileProps {
  label: string;
  icon: LucideIcon;
  transitionId: SceneTransition;
  selected: boolean;
  onSelect: () => void;
}

export function TransitionPreviewTile({
  label,
  icon: Icon,
  transitionId,
  selected,
  onSelect,
}: TransitionPreviewTileProps) {
  return (
    <button
      type="button"
      onClick={onSelect}
      className={cn(
        "group flex flex-col items-center gap-1.5 rounded-lg border p-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
        selected
          ? "border-blue-500 bg-blue-50"
          : "border-gray-200 bg-gray-50 hover:border-gray-300"
      )}
    >
      <span
        className={cn(
          "relative flex h-12 w-full items-center justify-center overflow-hidden rounded-md bg-gray-200",
          transitionId === "fade" && "group-hover:[&_.preview]:animate-pulse",
          transitionId === "slide-left" &&
            "group-hover:[&_.preview]:animate-[slide-preview_0.4s_ease-out_forwards]",
          transitionId === "zoom" &&
            "group-hover:[&_.preview]:animate-[zoom-preview_0.4s_ease-out_forwards]"
        )}
      >
        <span className="preview flex h-6 w-8 items-center justify-center rounded bg-primary-600/80">
          <Icon className="h-3 w-3 text-white" aria-hidden />
        </span>
      </span>
      <span className="text-[10px] font-medium text-gray-500">{label}</span>
    </button>
  );
}
