import { useIntl } from "react-intl"
import { Button, ButtonProps } from "../../Button"
import { IconButton } from "../../IconButton"
import { Typography } from "../../Typography"

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

import type { ReactNode } from "react"

interface ModalContentProps {
  title?: string
  content: ReactNode
  primaryAction:
    | (Pick<
        ButtonProps,
        "onPress" | "variant" | "isPending" | "isDisabled" | "type"
      > & {
        label: string
      })
    | null
  secondaryAction:
    | (Pick<ButtonProps, "onPress" | "variant"> & {
        label: string
      })
    | null
  onClose?: () => void
}

export function ModalContentWithActions({
  title,
  content,
  primaryAction,
  secondaryAction,
  onClose,
}: ModalContentProps) {
  const intl = useIntl()
  return (
    <>
      {title && (
        <header className={styles.header}>
          <Typography variant="Title/Subtitle/md">
            <p>{title}</p>
          </Typography>
          <IconButton
            variant="Muted"
            emphasis
            onPress={onClose}
            type="button"
            className={styles.close}
            iconName="close"
            aria-label={intl.formatMessage({
              id: "common.close",
              defaultMessage: "Close",
            })}
          />
        </header>
      )}
      <div className={styles.content}>{content}</div>
      <footer className={styles.footer}>
        {secondaryAction && (
          <Button
            variant={secondaryAction.variant ?? "Text"}
            onPress={secondaryAction.onPress}
          >
            {secondaryAction.label}
          </Button>
        )}
        {primaryAction && (
          <Button
            variant={primaryAction.variant ?? "Secondary"}
            onPress={primaryAction.onPress}
            isPending={primaryAction.isPending}
            isDisabled={primaryAction.isDisabled}
          >
            {primaryAction.label}
          </Button>
        )}
      </footer>
    </>
  )
}