import React from 'react';
import { Download, FileText, Film } from 'lucide-react';
import { jobsApi } from '../api/client';

export default function VideoPreview({ videoUrl, jobId }) {
  return (
    <div className="space-y-4">
      <h3 className="font-medium flex items-center gap-2">
        <Film size={20} className="text-green-500" />
        처리 완료!
      </h3>

      {/* Video Player */}
      <div className="relative bg-black rounded-lg overflow-hidden aspect-[9/16] max-w-sm mx-auto">
        <video
          src={videoUrl}
          controls
          className="w-full h-full object-contain"
          poster=""
        >
          브라우저가 비디오를 지원하지 않습니다.
        </video>
      </div>

      {/* Download Buttons */}
      <div className="flex flex-wrap gap-3 justify-center">
        <a
          href={jobsApi.downloadOutput(jobId)}
          download
          className="btn-primary flex items-center gap-2"
        >
          <Download size={18} />
          영상 다운로드
        </a>

        <a
          href={jobsApi.downloadOriginal(jobId)}
          download
          className="btn-secondary flex items-center gap-2"
        >
          <Film size={18} />
          원본 영상
        </a>

        <a
          href={jobsApi.downloadSubtitle(jobId, 'srt')}
          download
          className="btn-secondary flex items-center gap-2"
        >
          <FileText size={18} />
          자막 (SRT)
        </a>

        <a
          href={jobsApi.downloadSubtitle(jobId, 'ass')}
          download
          className="btn-secondary flex items-center gap-2"
        >
          <FileText size={18} />
          자막 (ASS)
        </a>
      </div>

      <p className="text-sm text-gray-500 text-center">
        영상을 YouTube Shorts에 업로드하세요!
      </p>
    </div>
  );
}
