import { CloseLargeIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Subtitle from "@/components/TempDesignSystem/Text/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
  }
  secondaryAction: {
    label: string
    onClick: () => void
    intent?: "primary" | "secondary" | "text"
  }
  onClose: () => void
}

export function ModalContent({
  title,
  content,
  primaryAction,
  secondaryAction,
  onClose,
}: ModalContentProps) {
  return (
    <>
      <header className={styles.header}>
        <Subtitle color="uiTextHighContrast">{title}</Subtitle>
        <button onClick={onClose} type="button" className={styles.close}>
          <CloseLargeIcon color="uiTextMediumContrast" />
        </button>
      </header>
      <div className={styles.content}>{content}</div>
      <footer className={styles.footer}>
        <Button
          theme="base"
          intent={secondaryAction.intent ?? "text"}
          color="burgundy"
          onClick={secondaryAction.onClick}
        >
          {secondaryAction.label}
        </Button>
        <Button
          theme="base"
          intent={primaryAction.intent ?? "secondary"}
          onClick={primaryAction.onClick}
          disabled={primaryAction.isLoading}
        >
          {primaryAction.label}
        </Button>
      </footer>
    </>
  )
}