Modal

import { useState } from 'react'
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from '@akitectio/aki-ui'

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

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Open Modal
      </Button>
      
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <ModalHeader onClose={() => setIsOpen(false)}>
          Modal Title
        </ModalHeader>
        <ModalBody>
          <p>This is the modal content.</p>
        </ModalBody>
        <ModalFooter>
          <Button variant="secondary" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setIsOpen(false)}>
            Save
          </Button>
        </ModalFooter>
      </Modal>
    </>
  )
}

<div className="flex gap-2">
  <Button onClick={() => setModalOpen('sm')}>Small</Button>
  <Button onClick={() => setModalOpen('md')}>Medium</Button>
  <Button onClick={() => setModalOpen('lg')}>Large</Button>
  <Button onClick={() => setModalOpen('xl')}>Extra Large</Button>
  <Button onClick={() => setModalOpen('full')}>Full Screen</Button>
</div>

<Modal
  isOpen={modalSize === 'lg'}
  onClose={() => setModalSize('')}
  size="lg"
>
  <ModalHeader>Large Modal</ModalHeader>
  <ModalBody>Content for large modal...</ModalBody>
  <ModalFooter>
    <Button onClick={() => setModalSize('')}>Close</Button>
  </ModalFooter>
</Modal>

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  centered={true}
>
  <ModalHeader>Centered Modal</ModalHeader>
  <ModalBody>
    This modal is vertically centered on the screen.
  </ModalBody>
  <ModalFooter>
    <Button onClick={() => setIsOpen(false)}>Close</Button>
  </ModalFooter>
</Modal>

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  scrollable={true}
>
  <ModalHeader>Scrollable Modal</ModalHeader>
  <ModalBody>
    {/* Long content that needs scrolling */}
    <div>Lots of content here...</div>
  </ModalBody>
  <ModalFooter>
    <Button onClick={() => setIsOpen(false)}>Close</Button>
  </ModalFooter>
</Modal>

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  hasCloseButton={false}
  closeOnOverlayClick={false}
  className="max-w-md"
>
  <div className="p-6 text-center">
    <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
      <span className="text-green-600 text-xl">✓</span>
    </div>
    <h3 className="text-lg font-semibold mb-2">Success!</h3>
    <p className="text-gray-600 mb-6">
      Your account has been created successfully.
    </p>
    <div className="flex justify-center gap-3">
      <Button variant="secondary" onClick={() => setIsOpen(false)}>
        Close
      </Button>
      <Button onClick={() => setIsOpen(false)}>
        Get Started
      </Button>
    </div>
  </div>
</Modal>

<Button variant="danger" onClick={() => setConfirmModalOpen(true)}>
  Delete Account
</Button>

<Modal
  isOpen={confirmModalOpen}
  onClose={() => setConfirmModalOpen(false)}
  size="sm"
  centered
>
  <ModalHeader>Confirm Deletion</ModalHeader>
  <ModalBody>
    <div className="flex items-start gap-3">
      <span className="text-red-500 text-xl">⚠️</span>
      <div>
        <p className="font-medium mb-2">
          Are you sure you want to delete your account?
        </p>
        <p className="text-gray-600 text-sm">
          This action cannot be undone.
        </p>
      </div>
    </div>
  </ModalBody>
  <ModalFooter>
    <Button variant="secondary" onClick={() => setConfirmModalOpen(false)}>
      Cancel
    </Button>
    <Button variant="danger" onClick={() => setConfirmModalOpen(false)}>
      Delete Account
    </Button>
  </ModalFooter>
</Modal>