"use client";

import { useState } from "react";
import Image from "next/image";
import ImageLightbox from "./ImageLightbox";

interface ClickableImageProps {
  src: string;
  alt: string;
  /** Classes forwarded to the <Image> (it always uses `fill`). */
  className?: string;
  sizes?: string;
  priority?: boolean;
}

/**
 * A `fill` next/image that opens itself in the shared ImageLightbox when
 * clicked. Exists so the hero banners on the program/workshop detail pages —
 * which are server components and can't hold state — get the same
 * click-to-enlarge behaviour as the gallery sections.
 *
 * Single image, so the lightbox renders without prev/next arrows.
 */
export default function ClickableImage({
  src,
  alt,
  className = "",
  sizes,
  priority,
}: ClickableImageProps) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Image
        src={src}
        alt={alt}
        fill
        sizes={sizes}
        priority={priority}
        className={`${className} cursor-pointer`}
        onClick={() => setOpen(true)}
      />
      <ImageLightbox
        images={[src]}
        index={open ? 0 : null}
        onClose={() => setOpen(false)}
      />
    </>
  );
}