// src/components/MediaSummary/MediaSummary.tsx import type { ReactNode } from "react"; import { Icon } from "../Icon/Icon"; import type { IconName } from "../Icon/Icon"; import { Link } from "../Link/Link"; import { RatingSummary } from "../RatingSummary/RatingSummary"; import styles from "./MediaSummary.module.css"; export type MediaSummaryProps = { parentTitle?: string; title: string; rating?: { value: number; count: number }; ratingMeta?: string; date?: string; description?: string; /** Icon actions — canonical trio: play / watchlist / add. */ actions?: ReactNode; detailsHref?: string; loading?: boolean; }; /** * One anatomy for two homes: the bottom Sheet's content and the cards' * hover detail panels were the same block in the old file — title, * rating or date, description, action row, Details. */ export function MediaSummary({ parentTitle, title, rating, ratingMeta, date, description, actions, detailsHref, loading = false, }: MediaSummaryProps) { if (loading) { return (

); } return (

{parentTitle && {parentTitle}} {title} {rating && (

{ratingMeta && {ratingMeta}}

)} {date && (

{date}

)} {description &&

{description}

}

{actions &&

{actions}

} {detailsHref && ( Details )}

); } export type MediaActionProps = { icon: "play" | "watchlist" | "add" | "remove"; label: string; onClick?: () => void; }; const ACTION_ICONS: Record = { play: "play", watchlist: "bookmark", add: "plus", remove: "trash", }; /** 44px accent icon button for the MediaSummary action row. */ export function MediaAction({ icon, label, onClick }: MediaActionProps) { return ( ); }