Modal

import { Modal } from '@adoptaunabuelo/react-components';

const [isOpen, setIsOpen] = useState(false);

<Modal
  isVisible={isOpen}
  title="Modal Title"
  subtitle="Optional subtitle"
  onClose={() => setIsOpen(false)}
  buttonProps={{
    children: "Save",
    onClick: handleSave
  }}
>
  <p>Modal content goes here</p>
</Modal>

const [isOpen, setIsOpen] = useState(false);

<>
  <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
  
  <Modal
    isVisible={isOpen}
    title="Confirm Action"
    subtitle="Are you sure you want to proceed?"
    onClose={() => setIsOpen(false)}
    buttonProps={{
      children: "Confirm",
      onClick: () => {
        handleConfirm();
        setIsOpen(false);
      }
    }}
  >
    <p>This action cannot be undone.</p>
  </Modal>
</>

const [formData, setFormData] = useState({ name: '', email: '' });

<Modal
  type="form"
  isVisible={isOpen}
  title="Edit Profile"
  onClose={() => setIsOpen(false)}
  buttonProps={{
    children: "Save",
    loading: isSaving,
    onClick: handleSave
  }}
  options={[
    {
      id: "name",
      title: "Name",
      Data: (
        <Input
          value={formData.name}
          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        />
      )
    },
    { id: "separator" },
    {
      id: "email",
      title: "Email",
      Data: (
        <Input
          type="email"
          value={formData.email}
          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        />
      )
    }
  ]}
/>

<Modal
  type="web"
  isVisible={isOpen}
  hideClose
  url="https://example.com/terms"
  style={{ width: 600, height: 400 }}
  onClose={() => setIsOpen(false)}
/>

<Modal
  type="full-screen"
  isVisible={isOpen}
  title="Image Gallery"
  onClose={() => setIsOpen(false)}
>
  <ImageGallery images={images} />
</Modal>

<Modal
  type="lateral"
  isVisible={isPanelOpen}
  title="Settings"
  onClose={() => setIsPanelOpen(false)}
  buttonProps={{
    children: "Save Settings",
    onClick: handleSaveSettings
  }}
>
  <SettingsForm />
</Modal>

const [error, setError] = useState('');

<Modal
  isVisible={isOpen}
  title="Delete Account"
  error={error}
  onClose={() => setIsOpen(false)}
  buttonProps={{
    children: "Delete",
    design: "secondary",
    onClick: async () => {
      try {
        await deleteAccount();
        setIsOpen(false);
      } catch (err) {
        setError('Failed to delete account. Please try again.');
      }
    }
  }}
>
  <p>This will permanently delete your account and all data.</p>
</Modal>

const modalRef = useRef<ModalRef>(null);

const handleExternalClose = () => {
  modalRef.current?.close();
};

<Modal
  ref={modalRef}
  isVisible={isOpen}
  title="Modal with Ref"
  onClose={() => setIsOpen(false)}
>
  <Button onClick={handleExternalClose}>Close from Inside</Button>
</Modal>

<Modal
  isVisible={isOpen}
  title="Upload Files"
  onClose={() => setIsOpen(false)}
  Header={
    <ProgressBar value={uploadProgress} />
  }
  Bottom={
    <Text type="p2" style={{ color: '#666' }}>
      {filesUploaded}/{totalFiles} files uploaded
    </Text>
  }
  buttonProps={{
    children: "Done",
    disabled: uploadProgress < 100,
    onClick: () => setIsOpen(false)
  }}
>
  <FileList files={files} />
</Modal>

const ConfirmDialog = ({ isOpen, onConfirm, onCancel, title, message }) => (
  <Modal
    isVisible={isOpen}
    title={title}
    onClose={onCancel}
    buttonProps={{
      children: "Confirm",
      onClick: onConfirm
    }}
    Bottom={
      <Button design="text" onClick={onCancel}>
        Cancel
      </Button>
    }
  >
    <p>{message}</p>
  </Modal>
);