client/src/components/DownloadButton.tsx

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Download, Loader2 } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { downloadImage, downloadImageAsPDF } from '@/lib/downloadUtils';
import { toast } from 'sonner';

interface DownloadButtonProps {
  imageUrl: string;
  fileName: string;
  title: string;
  variant?: 'default' | 'outline' | 'ghost';
  size?: 'default' | 'sm' | 'lg';
}

export function DownloadButton({
  imageUrl,
  fileName,
  title,
  variant = 'outline',
  size = 'default',
}: DownloadButtonProps) {
  const [isLoading, setIsLoading] = useState(false);

  const handleDownloadImage = async () => {
    setIsLoading(true);
    try {
      await downloadImage(imageUrl, fileName, 'high');
      toast.success(`Downloaded ${fileName} as PNG`);
    } catch (error) {
      toast.error('Failed to download image');
    } finally {
      setIsLoading(false);
    }
  };

  const handleDownloadPDF = async () => {
    setIsLoading(true);
    try {
      await downloadImageAsPDF(imageUrl, fileName, title);
      toast.success(`Downloaded ${fileName} as PDF`);
    } catch (error) {
      toast.error('Failed to download PDF');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant={variant}
          size={size}
          disabled={isLoading}
          className="gap-2"
        >
          {isLoading ? (
            <Loader2 className="w-4 h-4 animate-spin" />
          ) : (
            <Download className="w-4 h-4" />
          )}
          Download
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={handleDownloadImage} disabled={isLoading}>
          <span>Download as PNG (High-Res)</span>
        </DropdownMenuItem>
        <DropdownMenuItem onClick={handleDownloadPDF} disabled={isLoading}>
          <span>Download as PDF</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}