Modal

import {
  Modal,
  ModalTrigger,
  ModalContent,
  ModalOverlay,
  ModalHeader,
  ModalBody,
  ModalTitle,
  ModalDescription,
  ModalClose,
  ModalPortal,
} from '@nim-ui/components';

function ControlledModal() {
  const [open, setOpen] = useState(false);

  return (
    <Modal open={open} onOpenChange={setOpen}>
      <ModalTrigger asChild>
        <Button>Open Controlled Modal</Button>
      </ModalTrigger>
      <ModalContent>
        <ModalHeader>
          <ModalTitle>Controlled Modal</ModalTitle>
        </ModalHeader>
        <ModalBody>
          <p>This modal is controlled via React state.</p>
          <Button onClick={() => setOpen(false)} className="mt-4">
            Close Programmatically
          </Button>
        </ModalBody>
      </ModalContent>
    </Modal>
  );
}

function FormModal() {
  const [open, setOpen] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission
    setOpen(false);
  };

  return (
    <Modal open={open} onOpenChange={setOpen}>
      <ModalTrigger asChild>
        <Button>Create New Item</Button>
      </ModalTrigger>
      <ModalContent>
        <ModalHeader>
          <ModalTitle>Create Item</ModalTitle>
          <ModalDescription>Fill out the form below to create a new item.</ModalDescription>
        </ModalHeader>
        <ModalBody>
          <form onSubmit={handleSubmit}>
            <Stack spacing="md">
              <Input label="Name" placeholder="Enter item name" required />
              <Textarea label="Description" placeholder="Describe the item" />
              <Flex justify="end" gap="sm">
                <ModalClose asChild>
                  <Button variant="outline" type="button">Cancel</Button>
                </ModalClose>
                <Button variant="primary" type="submit">Create</Button>
              </Flex>
            </Stack>
          </form>
        </ModalBody>
      </ModalContent>
    </Modal>
  );
}

function ConfirmDialog({ onConfirm, title, message }) {
  const [open, setOpen] = useState(false);

  return (
    <Modal open={open} onOpenChange={setOpen}>
      <ModalTrigger asChild>
        <Button variant="destructive">Delete</Button>
      </ModalTrigger>
      <ModalContent>
        <ModalHeader>
          <ModalTitle>{title}</ModalTitle>
          <ModalDescription>{message}</ModalDescription>
        </ModalHeader>
        <ModalBody>
          <Flex justify="end" gap="sm" className="mt-4">
            <ModalClose asChild>
              <Button variant="outline">Cancel</Button>
            </ModalClose>
            <Button
              variant="destructive"
              onClick={() => {
                onConfirm();
                setOpen(false);
              }}
            >
              Confirm
            </Button>
          </Flex>
        </ModalBody>
      </ModalContent>
    </Modal>
  );
}

function ImagePreview({ src, alt }) {
  return (
    <Modal>
      <ModalTrigger asChild>
        <img
          src={src}
          alt={alt}
          className="cursor-pointer rounded-lg hover:opacity-80 transition-opacity"
        />
      </ModalTrigger>
      <ModalContent className="max-w-3xl">
        <ModalHeader>
          <ModalTitle>{alt}</ModalTitle>
        </ModalHeader>
        <ModalBody>
          <img src={src} alt={alt} className="w-full rounded" />
        </ModalBody>
      </ModalContent>
    </Modal>
  );
}