'use client';

/**
 * Native `<video slot="media">` for direct MP4 / WebM / blob / data URLs.
 */

import { MediaPosterImage } from 'media-chrome/react';
import type { UrlSource, VideoPlayerSettings } from '../types';

export interface NativeCanvasProps extends VideoPlayerSettings {
  readonly source: UrlSource;
}

export function NativeCanvas({
  source,
  autoPlay,
  muted,
  loop,
  playsInline = true,
  crossOrigin = 'anonymous',
  preload = 'metadata',
}: NativeCanvasProps) {
  return (
    <>
      <video
        slot="media"
        src={source.url}
        muted={muted}
        loop={loop}
        autoPlay={autoPlay}
        playsInline={playsInline}
        crossOrigin={crossOrigin}
        preload={preload}
      />
      {source.poster && <MediaPosterImage slot="poster" src={source.poster} />}
    </>
  );
}