web/packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx

import { MaterialIcon } from "../../Icons/MaterialIcon"
import { OldDSButton as Button } from "../../OldDSButton"
import { Typography } from "../../Typography"

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

import type { ReactNode } from "react"

interface ModalContentProps {
  title?: string
  content: ReactNode
  primaryAction: {
    label: string
    onClick: () => void
    intent?: "primary" | "secondary" | "text"
    isLoading?: boolean
    disabled?: boolean
  } | null
  secondaryAction: {
    label: string
    onClick: () => void
    intent?: "primary" | "secondary" | "text"
  } | null
  onClose?: () => void
}

export function ModalContentWithActions({
  title,
  content,
  primaryAction,
  secondaryAction,
  onClose,
}: ModalContentProps) {
  return (
    <>
      {title && (
        <header className={styles.header}>
          <Typography variant="Title/Subtitle/md">
            <p>{title}</p>
          </Typography>
          <button onClick={onClose} type="button" className={styles.close}>
            <MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
          </button>
        </header>
      )}
      <div className={styles.content}>{content}</div>
      <footer className={styles.footer}>
        {secondaryAction && (
          <Button
            theme="base"
            intent={secondaryAction.intent ?? "text"}
            color="burgundy"
            onClick={secondaryAction.onClick}
          >
            {secondaryAction.label}
          </Button>
        )}
        {primaryAction && (
          <Button
            theme="base"
            intent={primaryAction.intent ?? "secondary"}
            onClick={primaryAction.onClick}
            disabled={primaryAction.isLoading || primaryAction.disabled}
          >
            {primaryAction.label}
          </Button>
        )}
      </footer>
    </>
  )
}