moviedice/src/components/movies/poster-card.tsx

"use client";

import type { Database } from "@/types/database";
import { getTMDBImageUrl } from "@/types/tmdb";

type MovieRow = Database["public"]["Tables"]["movies"]["Row"];

interface PosterCardProps {
  movie: MovieRow;
  avatarColor?: string | null;
  onInfo: (movie: MovieRow) => void;
}

export function PosterCard({ movie, avatarColor, onInfo }: PosterCardProps) {
  const posterUrl = getTMDBImageUrl(movie.poster_path, "grid");
  const altText = `${movie.title} (${movie.year}) poster`;

  return (
    <button
      type="button"
      onClick={() => onInfo(movie)}
      aria-label={`More info about ${movie.title}`}
      className="w-full text-left rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
    >
      <div className="relative aspect-[2/3] overflow-hidden rounded-lg bg-gray-800">
        {posterUrl ? (
          /* eslint-disable-next-line @next/next/no-img-element */
          <img
            src={posterUrl}
            alt={altText}
            loading="lazy"
            className="h-full w-full object-cover"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center p-2 text-center text-sm text-gray-400">
            {movie.title}
          </div>
        )}

        {movie.watched && (
          <span
            className="absolute top-1.5 left-1.5 flex h-7 w-7 items-center justify-center rounded-full bg-green-600 text-white shadow-lg ring-2 ring-white/80"
            aria-label="Watched"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={3}
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-4 w-4"
              aria-hidden="true"
            >
              <polyline points="20 6 9 17 4 12" />
            </svg>
          </span>
        )}

        {avatarColor && (
          <span
            className="absolute top-1.5 right-1.5 block h-5 w-5 rounded-full border-2 border-white/80"
            style={{ backgroundColor: avatarColor }}
            aria-hidden="true"
          />
        )}

        <span
          aria-hidden="true"
          className="pointer-events-none absolute bottom-1.5 right-1.5 flex h-9 w-9 items-center justify-center rounded-full bg-black/65 text-base font-serif italic text-white shadow-lg ring-1 ring-white/30"
        >
          i
        </span>
      </div>
      <p className="mt-1 truncate text-sm font-medium text-gray-100">{movie.title}</p>
    </button>
  );
}