MDX/YoutubeAt

import { YoutubeAt } from './youtube-at';

/**
 * YoutubeAt Component
 *
 * A click-to-play YouTube embed facade that shows a video capture frame
 * as a cover image with play button overlay and timestamp badge.
 * Clicking replaces the cover with the actual YouTube iframe.
 */
export const meta = {
  title: 'MDX/YoutubeAt',
};

/**
 * Default - With timestamp and cover image
 *
 * Shows a capture frame from the video at the specified timestamp.
 * In this demo, captures array is empty so it falls back to iframe.
 */
export const Default = () => (
  <YoutubeAt
    url="https://youtu.be/e8B2xey0SeA?t=67"
    videoDir="20260405-e8B2xey0SeA-demo"
    captures={[]}
  />
);

/**
 * With captures - Simulates having capture frames available
 *
 * When captures array contains matching filenames, the component
 * shows the nearest capture as cover image.
 */
export const WithCaptures = () => (
  <YoutubeAt
    url="https://youtu.be/e8B2xey0SeA?t=67"
    videoDir="20260405-e8B2xey0SeA-demo"
    captures={[
      'capture-00-01-00.jpg',
      'capture-00-01-02.jpg',
      'capture-00-01-04.jpg',
      'capture-00-01-06.jpg',
      'capture-00-01-08.jpg',
      'capture-00-01-10.jpg',
    ]}
  />
);

/**
 * Long timestamp (20+ minutes)
 */
export const LongTimestamp = () => (
  <YoutubeAt
    url="https://youtu.be/rpqb9RYUSw8?t=1200"
    videoDir="20260405-rpqb9RYUSw8-demo"
    captures={[]}
  />
);

/**
 * Custom aspect ratio (4:3)
 */
export const AspectRatio4x3 = () => (
  <YoutubeAt
    url="https://youtu.be/e8B2xey0SeA?t=67"
    videoDir="20260405-e8B2xey0SeA-demo"
    captures={[]}
    aspectRatio="4 / 3"
  />
);

/**
 * With caption — wraps in <figure> and renders a centered <figcaption>
 *
 * Uses the canonical caption styling shared with ArticleImage and YouTubeCaptureWip.
 */
export const WithCaption = () => (
  <YoutubeAt
    url="https://youtu.be/e8B2xey0SeA?t=67"
    videoDir="20260405-e8B2xey0SeA-demo"
    captures={[]}
    caption="動画キャプションのサンプル: タイムスタンプ付き埋め込みファサード"
  />
);

/**
 * Multiple in sequence - typical guide article layout
 */
export const MultipleInSequence = () => (
  <div className="max-w-[800px]">
    <h3 className="text-zd-white pb-vgap-sm">Section A</h3>
    <YoutubeAt
      url="https://youtu.be/e8B2xey0SeA?t=30"
      videoDir="20260405-e8B2xey0SeA-demo"
      captures={[]}
    />
    <h3 className="text-zd-white pb-vgap-sm">Section B</h3>
    <YoutubeAt
      url="https://youtu.be/e8B2xey0SeA?t=120"
      videoDir="20260405-e8B2xey0SeA-demo"
      captures={[]}
    />
    <h3 className="text-zd-white pb-vgap-sm">Section C</h3>
    <YoutubeAt
      url="https://youtu.be/e8B2xey0SeA?t=300"
      videoDir="20260405-e8B2xey0SeA-demo"
      captures={[]}
    />
  </div>
);