'use client'

interface VideoPreviewProps {
  src: string
  fileName?: string
}

/**
 * Video preview using native HTML5 video element.
 * Supports mp4, webm, mov, avi via the workspace raw API.
 */
export function VideoPreview({ src, fileName }: VideoPreviewProps) {
  return (
    <div className="flex flex-col h-full bg-surface-2">
      <div className="flex items-center justify-between px-3 py-1.5 border-b border-subtle bg-surface shrink-0">
        <span className="text-[11px] text-muted">Video</span>
        {fileName && (
          <span className="text-[11px] text-tertiary truncate max-w-[200px]">{fileName}</span>
        )}
      </div>
      <div className="flex-1 flex items-center justify-center p-4">
        <video
          controls
          className="max-w-full max-h-full rounded-lg shadow-forge-md"
          src={src}
          preload="metadata"
        >
          <track kind="captions" />
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
  )
}