// src/components/Thumbnail/Thumbnail.tsx import type { ReactNode } from "react"; import { Icon } from "../Icon/Icon"; import type { IconName } from "../Icon/Icon"; import styles from "./Thumbnail.module.css"; export type ThumbnailState = | "default" | "progress" | "watched" | "coming-soon" | "unavailable" | "missing" | "loading"; export type ThumbnailProps = { aspect?: "wide" | "poster"; state?: ThumbnailState; src?: string; alt?: string; /** Runtime chip text: "23m", "7m left". Hidden when empty. */ duration?: string; /** 0–1, drawn as the accent bar when state is "progress". */ progress?: number; /** Top-left label slot — compose Tag (Premium/Live) or, later, RatingMark. */ label?: ReactNode; showPlay?: boolean; }; const STATE_CHIP: Partial> = { watched: "Watched", unavailable: "Unavailable", }; /** * The shared media image block. State machinery (progress bar, watched/ * coming-soon/unavailable overlays, skeletons) lives here so every card * gets it for free. Glyphs are drawn inline and sit on a bg/scrim disc. */ export function Thumbnail({ aspect = "wide", state = "default", src, alt = "", duration, progress = 0, label, showPlay = true, }: ThumbnailProps) { const dimmed = state === "watched" || state === "coming-soon" || state === "unavailable"; const chip = STATE_CHIP[state] ?? ((state === "default" || state === "progress") ? duration : undefined); if (state === "loading") { return

; } return (

{state === "missing" || !src ? (

) : ( // eslint-disable-next-line @next/next/no-img-element {alt}

)} {dimmed &&

} {glyphFor(state, showPlay)} {label &&

{label}

} {chip && {chip}} {state === "progress" && (

)}

); } function glyphFor(state: ThumbnailState, showPlay: boolean) { const glyphs: Partial> = { default: showPlay ? "play" : undefined, progress: showPlay ? "play" : undefined, watched: "rewatch", "coming-soon": "clock", unavailable: "play-slash", }; const name = glyphs[state]; if (!name) return null; return ( ); }