'use client';

import { ProtectedVideoPlayer } from '@/components/media/ProtectedVideoPlayer';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import type { UploadVideo } from '@/types';

interface UploadVideoDialogProps {
  upload: UploadVideo | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function UploadVideoDialog({
  upload,
  open,
  onOpenChange,
}: UploadVideoDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="gap-3 p-3 sm:max-w-5xl sm:p-4">
        <DialogHeader className="min-w-0 pr-8">
          <DialogTitle className="truncate text-left text-base">
            Video Preview
          </DialogTitle>
          <DialogDescription className="truncate text-xs">
            {upload?.filename ?? 'Uploaded video'}
          </DialogDescription>
        </DialogHeader>

        <ProtectedVideoPlayer
          url={open ? upload?.video_url : undefined}
          className="rounded-lg"
          unavailableTitle="Video preview unavailable"
        />
      </DialogContent>
    </Dialog>
  );
}