"use client";

import React from "react";
import Image from "next/image";
import { Image as ImageIcon, Maximize2 } from "lucide-react";
import type { GalleryImage } from "@/types/gallery";
import styles from "./GalleryPhotoCard.module.css";

interface GalleryPhotoCardProps {
  image: GalleryImage;
  mountainName: string;
  onClick: () => void;
}

export default function GalleryPhotoCard({
  image,
  mountainName,
  onClick,
}: GalleryPhotoCardProps) {
  const displayCaption = image.caption || `Dokumentasi ${mountainName}`;

  return (
    <div
      role="button"
      tabIndex={0}
      className={styles.card}
      onClick={onClick}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          onClick();
        }
      }}
      aria-label={`Lihat foto: ${displayCaption}`}
    >
      <div className={styles.imageWrapper}>
        <Image
          src={image.image_url}
          alt={displayCaption}
          fill
          unoptimized
          sizes="(max-width: 640px) 85vw, (max-width: 1024px) 45vw, 32vw"
          className={styles.image}
        />

        {/* ── Subtle Gradient Overlay for Readability ────────────── */}
        <div className={styles.overlay}>
          <div className={styles.captionGroup}>
            <ImageIcon size={16} className={styles.captionIcon} aria-hidden="true" />
            <span className={styles.captionText}>{displayCaption}</span>
          </div>

          <div className={styles.expandIconBox} aria-hidden="true">
            <Maximize2 size={14} />
          </div>
        </div>
      </div>
    </div>
  );
}