web/apps/scandic-web/components/Dialog/index.tsx

"use client"
import {
  Dialog as AriaDialog,
  DialogTrigger,
  Modal,
  ModalOverlay,
} from "react-aria-components"

import { Button } from "@scandic-hotels/design-system/Button"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { Typography } from "@scandic-hotels/design-system/Typography"

import styles from "./dialog.module.css"

import type { DialogProps } from "@/types/components/dialog"

export default function Dialog({
  bodyText,
  cancelButtonText,
  proceedHref,
  proceedIsPending = false,
  proceedOnClick = () => {},
  proceedText,
  titleText,
  trigger,
}: DialogProps) {
  return (
    <DialogTrigger>
      {trigger}
      <ModalOverlay className={styles.overlay} isDismissable>
        <Modal>
          <AriaDialog role="alertdialog" className={styles.dialog}>
            {({ close }) => (
              <section className={styles.modal}>
                <header className={styles.header}>
                  <Typography variant="Title/Subtitle/md">
                    <p>{titleText}</p>
                  </Typography>
                  <Typography>
                    <p>{bodyText}</p>
                  </Typography>
                </header>
                {proceedIsPending ? (
                  <LoadingSpinner />
                ) : (
                  <footer className={styles.footer}>
                    <Button
                      variant="Secondary"
                      onPress={close}
                      size="md"
                      color="Primary"
                    >
                      {cancelButtonText}
                    </Button>
                    {proceedHref ? (
                      <ButtonLink
                        variant="Primary"
                        color="Primary"
                        size="md"
                        href={proceedHref}
                      >
                        {proceedText}
                      </ButtonLink>
                    ) : (
                      <Button
                        variant="Primary"
                        color="Primary"
                        onPress={() => {
                          proceedOnClick(close)
                        }}
                        size="md"
                      >
                        {proceedText}
                      </Button>
                    )}
                  </footer>
                )}
              </section>
            )}
          </AriaDialog>
        </Modal>
      </ModalOverlay>
    </DialogTrigger>
  )
}