Modal

import { useState } from 'react'
import { Modal, Button } from '@mt/design-system'

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

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

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Modal Title"
        description="This is a modal description"
      >
        <p className="text-mt-text-muted">
          Modal content goes here.
        </p>
      </Modal>
    </>
  )
}

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Small Modal"
  size="sm"
>
  <p className="text-mt-text-muted">
    This is a small modal.
  </p>
</Modal>

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Large Modal"
  size="lg"
>
  <p className="text-mt-text-muted">
    This is a large modal.
  </p>
</Modal>