'use client';

/**
 * `<vimeo-video slot="media">` — Vimeo Player API wrapper as a custom
 * element via `vimeo-video-element`. Same media-chrome integration story
 * as the YouTube canvas.
 */

import 'vimeo-video-element';
import './jsx-augmentation';
import { MediaPosterImage } from 'media-chrome/react';
import type { VimeoSource, VideoPlayerSettings } from '../types';

export interface VimeoCanvasProps extends VideoPlayerSettings {
  readonly source: VimeoSource;
}

export function VimeoCanvas({
  source,
  autoPlay,
  muted,
  loop,
}: VimeoCanvasProps) {
  const base = `https://vimeo.com/${source.videoId}`;
  const src = source.startTime ? `${base}#t=${source.startTime}s` : base;

  return (
    <>
      <vimeo-video
        slot="media"
        src={src}
        {...(muted && { muted: true })}
        {...(autoPlay && { autoplay: true })}
        {...(loop && { loop: true })}
        playsInline
      />
      {source.poster && <MediaPosterImage slot="poster" src={source.poster} />}
    </>
  );
}