/**
 * New Comic Modal Component
 *
 * Confirmation dialog before starting a new comic
 */

import type { JSX } from 'react';
import { AlertTriangle, X } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface NewComicModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
}

export function NewComicModal({ isOpen, onClose, onConfirm }: NewComicModalProps): JSX.Element | null {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
      <div className="bg-background rounded-lg shadow-lg max-w-md w-full">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b">
          <h2 className="text-xl font-bold flex items-center gap-2">
            <AlertTriangle className="w-6 h-6 text-amber-500" />
            Start New Comic?
          </h2>
          <button
            onClick={onClose}
            className="p-2 hover:bg-muted rounded-lg transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content */}
        <div className="p-6">
          <p className="text-muted-foreground mb-4">
            This will clear your current comic project, including:
          </p>
          <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1 mb-6">
            <li>Story script and characters</li>
            <li>Generated panel images</li>
            <li>Page layouts</li>
            <li>Speech bubbles</li>
          </ul>
          <p className="text-sm font-medium text-amber-600">
            This action cannot be undone.
          </p>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-3 p-6 border-t bg-muted/50">
          <Button variant="outline" onClick={onClose}>
            Cancel
          </Button>
          <Button variant="destructive" onClick={onConfirm}>
            Start New Comic
          </Button>
        </div>
      </div>
    </div>
  );
}
