Modal

import { Modal, Button } from 'fluxo-ui';
import { useState } from 'react';

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

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Modal Title"
      >
        <p>Modal content goes here...</p>

        <div className="flex justify-end gap-2 mt-4">
          <Button onClick={() => setIsOpen(false)} layout="outlined">
            Cancel
          </Button>
          <Button onClick={() => setIsOpen(false)} variant="primary">
            Confirm
          </Button>
        </div>
      </Modal>
    </>
  );
}

<Modal size="sm" isOpen={isOpen} onClose={onClose} title="Small">
  Small modal content
</Modal>

<Modal size="md" isOpen={isOpen} onClose={onClose} title="Medium">
  Medium modal content (default)
</Modal>

<Modal size="lg" isOpen={isOpen} onClose={onClose} title="Large">
  Large modal content
</Modal>

<Modal size="xl" isOpen={isOpen} onClose={onClose} title="Extra Large">
  Extra large modal content
</Modal>

<Modal isOpen={isOpen} onClose={onClose}>
  <h2 className="text-xl font-semibold mb-4">Custom Header</h2>
  <p>Your custom content here...</p>
</Modal>

<Modal
  isOpen={isOpen}
  onClose={onClose}
  title="Terms and Conditions"
  footer={
    <div className="flex justify-end gap-2">
      <Button onClick={onClose} layout="outlined">Decline</Button>
      <Button onClick={onClose} variant="success">Accept</Button>
    </div>
  }
>
  {/* Content scrolls automatically when it exceeds viewport */}
  <p>Long content...</p>
  <p>More content...</p>
</Modal>

<Modal
  isOpen={isOpen}
  onClose={onClose}
  title="Important Action"
  closeOnBackdrop={false}
>
  <p>This modal requires explicit action.</p>
  <p>Clicking outside won't close it.</p>

  <div className="flex justify-end gap-2 mt-4">
    <Button onClick={onClose}>Cancel</Button>
    <Button onClick={handleConfirm} variant="danger">Confirm</Button>
  </div>
</Modal>

function MyComponent() {
  const [firstModal, setFirstModal] = useState(false);
  const [secondModal, setSecondModal] = useState(false);

  return (
    <>
      <Button onClick={() => setFirstModal(true)}>Open First Modal</Button>

      <Modal isOpen={firstModal} onClose={() => setFirstModal(false)} title="First Modal">
        <p>First modal content</p>
        <Button onClick={() => setSecondModal(true)}>Open Second Modal</Button>
      </Modal>

      <Modal isOpen={secondModal} onClose={() => setSecondModal(false)} title="Second Modal">
        <p>Nested modal content</p>
      </Modal>
    </>
  );
}

<Modal isOpen={isOpen} onClose={onClose}>
  {/* Custom Header */}
  <div className="flex items-center justify-between pb-4 border-b">
    <div>
      <h2 className="text-2xl font-bold">Custom Header</h2>
      <p className="text-sm text-gray-500">With subtitle</p>
    </div>
    <span className="px-3 py-1 bg-green-100 rounded-full">Active</span>
  </div>

  {/* Content */}
  <div className="py-4">
    <p>Your modal content here...</p>
  </div>

  {/* Custom Footer */}
  <div className="flex justify-between pt-4 border-t">
    <Button layout="plain">Skip</Button>
    <div className="flex gap-2">
      <Button onClick={onClose} layout="outlined">Cancel</Button>
      <Button onClick={onSave} variant="success">Save</Button>
    </div>
  </div>
</Modal>