import { ReactNode } from 'react';
import { Button } from '@/components/ui/button';
import { BaseModal } from './BaseModal';
import { ErrorDisplay } from './ErrorDisplay';

interface FormModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (e: React.FormEvent) => Promise<void>;
  title: string;
  description?: string;
  children: ReactNode;
  loading: boolean;
  error: string;
  submitText: string;
  loadingText?: string;
  cancelText?: string;
  maxWidth?: string;
}

export function FormModal({
  isOpen,
  onClose,
  onSubmit,
  title,
  description,
  children,
  loading,
  error,
  submitText,
  loadingText = "En cours...",
  cancelText = "Annuler",
  maxWidth = "sm:max-w-[500px]"
}: FormModalProps) {
  const footer = (
    <>
      <Button type="button" variant="outline" onClick={onClose} disabled={loading}>
        {cancelText}
      </Button>
      <Button type="submit" disabled={loading} form="form-modal">
        {loading ? loadingText : submitText}
      </Button>
    </>
  );

  return (
    <BaseModal
      isOpen={isOpen}
      onClose={onClose}
      title={title}
      description={description}
      footer={footer}
      maxWidth={maxWidth}
    >
      <form id="form-modal" onSubmit={onSubmit} className="space-y-4">
        <ErrorDisplay error={error} />
        {children}
      </form>
    </BaseModal>
  );
}