import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Spinner } from '@/components/ui/spinner';
import { Textarea } from '@/components/ui/textarea';

const VideoDownloadModal = ({ isOpen, onClose, ffmpegCommand, handleDownloadButton, isExporting, exportProgress, exportStatus }) => {
    const debug = true;
    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Download Video</DialogTitle>
                    {exportStatus ||
                        (exportProgress > 0 && (
                            <DialogDescription>
                                <div className="flex items-center justify-center">
                                    <div className="flex items-center space-x-2">
                                        <span className="text-sm font-medium">{exportStatus}</span>
                                        <span className="text-xs font-medium">{exportProgress}%</span>
                                    </div>
                                    <Spinner className={'h-5 w-5'} />
                                </div>
                            </DialogDescription>
                        ))}
                </DialogHeader>

                {debug && <Textarea value={ffmpegCommand} readOnly />}

                <Button onClick={handleDownloadButton}>{isExporting ? <Spinner className="text-secondary h-4 w-4" /> : 'Download'}</Button>

                {/* Add your content here */}
            </DialogContent>
        </Dialog>
    );
};

export default VideoDownloadModal;