'use client';

import { Button } from '@/components/ui/shared/Button';
import { Input } from '@/components/ui/shared/Input';
import { CreatePatientInput } from '@/types/patient';

interface CreatePatientModalProps {
  isOpen: boolean;
  formData: CreatePatientInput;
  onChange: (patch: Partial<CreatePatientInput>) => void;
  onSubmit: () => void;
  onClose: () => void;
  loading?: boolean;
}

export function CreatePatientModal({
  isOpen,
  formData,
  onChange,
  onSubmit,
  onClose,
  loading = false,
}: CreatePatientModalProps) {
  if (!isOpen) {
    return null;
  }

  return (
    <div className="surface-card p-4 space-y-3">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <Input
          label="First name"
          value={formData.firstName || ''}
          onChange={(e) => onChange({ firstName: e.target.value })}
        />
        <Input
          label="Last name"
          value={formData.lastName || ''}
          onChange={(e) => onChange({ lastName: e.target.value })}
        />
        <Input
          label="Phone"
          value={formData.phone || ''}
          onChange={(e) => onChange({ phone: e.target.value })}
        />
        <Input
          label="Email"
          type="email"
          value={formData.email || ''}
          onChange={(e) => onChange({ email: e.target.value })}
        />
      </div>

      <div className="flex gap-2">
        <Button
          variant="primary"
          onClick={onSubmit}
          isLoading={loading}
          disabled={!formData.firstName || !formData.lastName}
        >
          Save Patient
        </Button>
        <Button variant="ghost" onClick={onClose}>
          Cancel
        </Button>
      </div>
    </div>
  );
}