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

import { MaterialIcon } from '../../Icons/MaterialIcon'
import { OldDSButton as Button } from '../../OldDSButton'
import Subtitle from '../../Subtitle'

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}>
          <Subtitle>{title}</Subtitle>
          <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>
    </>
  )
}