paint-ui/components/modals/export-dialog.tsx

'use client';

import { useState } from 'react';
import { X, Download } from 'lucide-react';
import { cn } from '@/lib/utils';

interface ExportDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onExport: (format: 'png' | 'jpeg' | 'webp', quality: number, filename: string) => void;
  defaultFilename?: string;
}

export function ExportDialog({
  isOpen,
  onClose,
  onExport,
  defaultFilename = 'image',
}: ExportDialogProps) {
  const [format, setFormat] = useState<'png' | 'jpeg' | 'webp'>('png');
  const [quality, setQuality] = useState(100);
  const [filename, setFilename] = useState(defaultFilename);

  if (!isOpen) return null;

  const handleExport = () => {
    onExport(format, quality / 100, filename);
    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
      <div
        className="bg-card border border-border rounded-lg shadow-lg w-full max-w-md"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-border">
          <h2 className="text-lg font-semibold text-card-foreground">Export Image</h2>
          <button
            onClick={onClose}
            className="p-1 hover:bg-accent rounded transition-colors"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Content */}
        <div className="p-4 space-y-4">
          {/* Filename */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-card-foreground">
              Filename
            </label>
            <input
              type="text"
              value={filename}
              onChange={(e) => setFilename(e.target.value)}
              className="w-full px-3 py-2 rounded-md border border-border bg-background text-foreground"
              placeholder="Enter filename"
            />
          </div>

          {/* Format */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-card-foreground">
              Format
            </label>
            <div className="grid grid-cols-3 gap-2">
              {(['png', 'jpeg', 'webp'] as const).map((fmt) => (
                <button
                  key={fmt}
                  onClick={() => setFormat(fmt)}
                  className={cn(
                    'py-2 px-4 rounded-md border-2 transition-colors uppercase',
                    format === fmt
                      ? 'border-primary bg-primary text-primary-foreground'
                      : 'border-border hover:border-primary/50'
                  )}
                >
                  {fmt}
                </button>
              ))}
            </div>
          </div>

          {/* Quality (for JPEG/WEBP) */}
          {(format === 'jpeg' || format === 'webp') && (
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <label className="text-sm font-medium text-card-foreground">
                  Quality
                </label>
                <span className="text-sm text-muted-foreground">{quality}%</span>
              </div>
              <input
                type="range"
                min="1"
                max="100"
                value={quality}
                onChange={(e) => setQuality(Number(e.target.value))}
                className="w-full"
              />
            </div>
          )}

          {/* Info */}
          <div className="p-3 bg-muted rounded-md text-sm text-muted-foreground">
            {format === 'png' && '• PNG: Lossless, supports transparency'}
            {format === 'jpeg' && '• JPEG: Lossy, smaller file size, no transparency'}
            {format === 'webp' && '• WEBP: Modern format, smaller size, supports transparency'}
          </div>
        </div>

        {/* Footer */}
        <div className="flex justify-end gap-2 p-4 border-t border-border">
          <button
            onClick={onClose}
            className="px-4 py-2 rounded-md hover:bg-accent transition-colors"
          >
            Cancel
          </button>
          <button
            onClick={handleExport}
            className="flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
          >
            <Download className="h-4 w-4" />
            Export
          </button>
        </div>
      </div>
    </div>
  );
}