import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

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
    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>
    </>
  )
}