"use client";

import { Download, Loader2 } from "lucide-react";
import type { RenderProgress } from "@/types";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";

interface ExportProgressProps {
  progress: RenderProgress | null;
  downloadUrl?: string;
  filename?: string;
  rendering: boolean;
  onStartRender: () => void;
}

export function ExportProgress({
  progress,
  downloadUrl,
  filename,
  rendering,
  onStartRender,
}: ExportProgressProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          {rendering ? <Loader2 className="h-5 w-5 animate-spin" /> : null}
          Export Video
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {!rendering && !downloadUrl && (
          <Button className="w-full" onClick={onStartRender}>Start Render</Button>
        )}

        {rendering && progress && (
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="capitalize">{progress.stage}...</span>
              <span>{Math.round(progress.percent)}%</span>
            </div>
            <Progress value={progress.percent} />
            <p className="text-sm text-zinc-500">{progress.message}</p>
          </div>
        )}

        {downloadUrl && (
          <Button asChild className="w-full">
            <a href={downloadUrl} download={filename}>
              <Download className="h-4 w-4" /> Download MP4
            </a>
          </Button>
        )}
      </CardContent>
    </Card>
  );
}