/**
 * VideoPlayerElement Component
 *
 * Video player element with controls.
 * Renders with unified wrapper styling + content.
 */

import React from 'react';
import type { CSSProperties } from 'react';
import type { CanvasElement } from '../../../types/constructor';
import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';

interface VideoPlayerElementProps {
  element: CanvasElement;
  resolveUrl?: (url: string | undefined) => string;
  className: string;
  style: CSSProperties;
}

const VideoPlayerElement: React.FC<VideoPlayerElementProps> = ({
  element,
  resolveUrl,
  className,
  style,
}) => {
  const resolve = resolveUrl ?? resolveAssetPlaybackUrl;

  if (!element.mediaUrl) {
    return (
      <div className={className} style={style}>
        <span className='px-4 py-2 text-sm'>Video Player</span>
      </div>
    );
  }

  return (
    <div className={className} style={style}>
      <video
        className='w-full h-full object-cover rounded'
        src={resolve(element.mediaUrl)}
        controls
        autoPlay={Boolean(element.mediaAutoplay)}
        loop={Boolean(element.mediaLoop)}
        muted={Boolean(element.mediaMuted)}
        playsInline
      />
    </div>
  );
};

export default VideoPlayerElement;
