import { Download, RefreshCw } from 'lucide-react'

interface ResultCardProps {
  jobId: string
  apiUrl: string
  onReset: () => void
}

export default function ResultCard({ jobId, apiUrl, onReset }: ResultCardProps) {
  const videoUrl = `${apiUrl}/api/download/${jobId}`

  return (
    <div className="bg-white/5 border border-emerald-500/20 rounded-xl p-5 space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="font-semibold text-emerald-400">Reel pronto!</h3>
        <button
          onClick={onReset}
          className="text-xs text-slate-500 hover:text-slate-300 flex items-center gap-1 transition-colors"
        >
          <RefreshCw size={12} />
          Novo Reel
        </button>
      </div>

      {/* Preview do vídeo */}
      <div className="flex justify-center">
        <video
          src={videoUrl}
          controls
          className="rounded-lg max-h-[500px] w-auto border border-white/10"
          style={{ aspectRatio: '9/16', maxWidth: '220px' }}
        />
      </div>

      {/* Botao de download */}
      <a
        href={videoUrl}
        download={`reel_${jobId.slice(0, 8)}.mp4`}
        className="flex items-center justify-center gap-2 w-full py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded-xl transition-colors"
      >
        <Download size={18} />
        Baixar Reel (MP4)
      </a>

      <p className="text-xs text-slate-500 text-center">
        Formato 9:16 (1080x1920) - pronto para Instagram Reels
      </p>
    </div>
  )
}