import React, { useRef, useCallback } from 'react';
import { getRegionAccent } from './MiniMap';
import './AlbumCard.css';

/* ─────────────────────────────────────────────
   AlbumCard — cover image + gradient + meta
───────────────────────────────────────────── */
export default function AlbumCard({ album, onClick }) {
  const cardRef = useRef(null);
  const accent = getRegionAccent(album.region || '');

  const handleClick = useCallback(() => {
    if (!onClick) return;
    const rect = cardRef.current?.getBoundingClientRect();
    onClick(album, rect);
  }, [album, onClick]);

  const handleKeyDown = useCallback(
    (e) => {
      if (e.key === 'Enter') handleClick();
    },
    [handleClick],
  );

  return (
    <div
      ref={cardRef}
      className="album-card"
      style={{ '--card-accent': accent }}
      role="button"
      tabIndex={0}
      onClick={handleClick}
      onKeyDown={handleKeyDown}
    >
      {/* cover */}
      <img
        className="album-card__cover"
        src={album.coverThumb}
        alt={album.name}
        loading="lazy"
        draggable={false}
      />

      {/* gradient overlay */}
      <div className="album-card__gradient" />

      {/* meta */}
      <div className="album-card__meta">
        <span className="album-card__region-badge">{album.regionName}</span>
        <h3 className="album-card__name">{album.name}</h3>
        <span className="album-card__count">{album.photoCount} frames</span>
      </div>
    </div>
  );
}