import { Modal } from './index.js'
import { Button } from '../Button/index.js'
import { TextAreaInput } from '../TextAreaInput/index.js'
import { Text } from '../Text/index.js'

export const Small = () => {
  return (
    <Modal open={true} onOpenChange={() => {}} size="small">
      <Modal.Header title="Small modal" description="this is a desc" />
      <Modal.Body>
        <Text>This modal body does not exceeds the max height</Text>
      </Modal.Body>
      <Modal.Actions>
        <Button variant="border">Cancel</Button>
        <Button>Save changes</Button>
      </Modal.Actions>
    </Modal>
  )
}
export const Regular = () => {
  return (
    <Modal open={true} onOpenChange={() => {}} size="regular">
      <Modal.Header title="Regular modal" />
      <Modal.Body>
        <Text>
          But this modal body is larger than the max height, so we see borders
        </Text>
        <TextAreaInput
          rows={40}
          onChange={() => {}}
          placeholder="This is a random text area input"
        />
        <Text>Modal body end</Text>
      </Modal.Body>
      <Modal.Actions>
        <Button variant="border">Cancel</Button>
        <Button>Save changes</Button>
      </Modal.Actions>
    </Modal>
  )
}
export const Large = () => {
  return (
    <Modal open={true} onOpenChange={() => {}} size="large">
      <Modal.Header title="Large modal" />
      <Modal.Body>
        <Text>Modal body</Text>
        <TextAreaInput
          rows={40}
          onChange={() => {}}
          placeholder="This is a random text area input"
        />
        <Text>Modal body end</Text>
      </Modal.Body>
      <Modal.Actions>
        <Button variant="border">Cancel</Button>
        <Button>Save changes</Button>
      </Modal.Actions>
    </Modal>
  )
}
