HoverGallery

"use client";
import { useState } from "react";
import NextImage from "next/image";
import { cn } from "@dashboardpack/core/lib/utils";
export interface GalleryImage {
  id: string;
  src: string;
  alt: string;
  caption?: string;
}
export interface HoverGalleryProps {
  label: string;
  images: GalleryImage[];
  onIndexChange?: (index: number) => void;
  square?: boolean;
  className?: string;
}
export function HoverGallery({
  label,
  images,
  onIndexChange,
  square = false,
  className,
}: HoverGalleryProps) {
  const [index, setIndex] = useState(0);
  const current = Math.min(index, Math.max(0, images.length - 1));
  if (!images.length)
    return (
      <p className="rounded-xl border border-dashed p-6 text-sm text-muted-foreground">
        No gallery images available.
      </p>
    );
  const choose = (next: number) => {
    setIndex(next);
    onIndexChange?.(next);
  };
  const image = images[current];
  return (
    <figure className={cn("min-w-0 space-y-3", className)}>
      <div
        className={cn(
          "relative overflow-hidden rounded-xl border bg-muted",
          square ? "aspect-square" : "aspect-[4/3]",
        )}
      >
        <NextImage
          key={image.src}
          src={image.src}
          alt={image.alt}
          fill
          unoptimized
          sizes="640px"
          className="object-cover"
        />
      </div>
      <div
        role="group"
        aria-label={`${label} image choices`}
        className="flex flex-wrap gap-2"
      >
        {images.map((item, position) => (
          <button
            key={item.id}
            type="button"
            aria-label={`View ${item.alt}`}
            aria-pressed={current === position}
            onPointerEnter={(event) => {
              if (event.pointerType === "mouse") choose(position);
            }}
            onFocus={() => choose(position)}
            onClick={() => choose(position)}
            className={cn(
              "relative h-14 w-20 overflow-hidden rounded-lg border outline-none focus-visible:ring-2 focus-visible:ring-ring",
              current === position &&
                "ring-2 ring-primary ring-offset-2 ring-offset-background",
            )}
          >
            <NextImage
              src={item.src}
              alt=""
              fill
              unoptimized
              sizes="80px"
              className="object-cover"
            />
          </button>
        ))}
      </div>
      <figcaption className="text-xs text-muted-foreground">
        <span className="font-medium text-foreground">{label}</span> ·{" "}
        {image.caption ?? image.alt} · {current + 1}/{images.length}
      </figcaption>
    </figure>
  );
}