"use client";

import { TimedVideo } from "@/components/notes/TimedNotes";

// THE ARTICLE'S OWN VIDEO -- the report's video (report.json `video.src`), as
// the published page plays it, with timed notes under it: `n` or Mark at the
// playhead writes a moment anchor `{ kind: "moment", file: <video.src>, t }`
// to the ARTICLE's notes. The handle is the reader's own, shared through
// <ShareNotes> (components/notes/NotesProvider.tsx), so a mark and a text note
// never race each other's token. No schedule: a report video is a published
// file, so a mark keeps its time only. Keep this the only place the article
// page renders its video.
export default function ArticleVideo({
  site,
  report,
  file,
  src,
  poster,
  caption,
}: {
  site: string;
  report: string;
  file: string;
  src: string;
  poster?: string;
  caption?: string;
}) {
  return (
    <figure data-article-video className="space-y-1">
      <TimedVideo target={{ article: `${site}/${report}` }} file={file} src={src} poster={poster} testId="article-video" showErrors={false} />
      {caption && <figcaption className="text-[12px] text-[var(--color-dim)]">{caption}</figcaption>}
    </figure>
  );
}