import type { ReactNode } from "react";
import { PopoverSurface } from "./AnchoredPopover";
import type { useMediaPreview } from "./useMediaPreview";
import { SURFACE } from "./surfaces";

// A media card's preview (docs/DESIGN.md "Media card", E28 S3h — the owner's pick C, 2026-09-26):
// rest the mouse on a card for a moment and a panel beside it shows what the card has no room for —
// the whole title, the facts, the synopsis in lines short enough to read. It replaced the synopsis as
// the picture's native tooltip, which fired anywhere on the art, ran one long line, and shared its
// mechanism with the cut title's own tooltip.
//
// Mouse only (`pointerOnly`): a keyboard walk down a grid would pop a panel at every stop, and on
// touch a tap is the card's play. The same facts are one row away there ("…" → Media info). Passive
// (`passthrough`), so the panel lying over the next card never eats the click aimed at it; any press
// on the card closes it, so it never sits over a menu the card just opened.

export function MediaPreview({
  preview,
  title,
  facts,
  summary,
}: {
  preview: ReturnType<typeof useMediaPreview>;
  title: string;
  /** One line under the title: year, length, score. */
  facts?: ReactNode;
  summary?: string | null;
}) {
  return (
    <PopoverSurface
      popover={preview.popover}
      passthrough
      // 18rem at text-xs: ~50 characters a line, inside the 45–75 a reader follows without losing
      // the next line's start.
      className={`${SURFACE.popover} w-72 px-3.5 py-3 text-left normal-case tracking-normal animate-[fadeIn_0.12s_ease]`}
    >
      <p className="text-sm font-semibold leading-snug text-fg">{title}</p>
      {facts && <div className="mt-0.5 text-xs text-muted">{facts}</div>}
      {summary && <p className="mt-2 line-clamp-8 text-xs leading-relaxed text-fg">{summary}</p>}
    </PopoverSurface>
  );
}