"use client";

import { Video } from "lucide-react";
import { AppModal, AppModalHeader } from "@/shared/ui/AppModal";

interface VideoPreviewModalProps {
    videoUrl: string | null;
    onClose: () => void;
    title?: string;
    subtitle?: string;
}

export default function VideoPreviewModal({
    videoUrl,
    onClose,
    title = "视频预览",
    subtitle = "ESC 关闭 · 点击空白关闭",
}: VideoPreviewModalProps) {
  if (!videoUrl) return null;

  return (
    <AppModal
      isOpen={Boolean(videoUrl)}
      onClose={onClose}
      zIndexClassName="z-[320]"
      panelClassName="relative w-full max-w-4xl rounded-2xl border border-white/10 bg-[#171821]/95 shadow-[0_24px_80px_rgba(0,0,0,0.55)] overflow-hidden flex flex-col"
      closeOnOverlay
    >
      <div data-video-preview-open="true" className="flex flex-col">
        <AppModalHeader
          title={title}
          subtitle={subtitle}
          icon={<Video className="h-5 w-5" />}
          onClose={onClose}
        />

        <div className="bg-black flex items-center justify-center min-h-[50vh] max-h-[80vh]">
          <video
            src={videoUrl}
            controls
            autoPlay
            preload="metadata"
            className="w-full h-full max-h-[80vh] object-contain"
          />
        </div>
      </div>
    </AppModal>
  );
}
