import { useTranslation } from "react-i18next";

import Modal from "../Modal/Modal";
import ContentSurface from "../../surface/ContentSurface/ContentSurface";
import LightSurface from "../../surface/LightSurface/LightSurface";
import Button from "../../atoms/Button/Button";
import classes from "./ActionModal.module.css";

type WithConfirm = {
  onConfirm: () => void;
  confirmText: string;
};

type WithoutConfirm = {
  onConfirm?: never;
  confirmText?: never;
};

type Props = (WithConfirm | WithoutConfirm) & {
  open: boolean;
  description: string;
  onClose: () => void;
};

export default function ActionModal({ open, description, onClose, onConfirm, confirmText }: Props) {
  const { t } = useTranslation();

  return (
    <Modal open={open} onClose={onClose}>
      <ContentSurface className={classes.content}>
        <LightSurface className={classes.description}>{description}</LightSurface>
      </ContentSurface>
      <div className={classes.buttons}>
        <Button variant="blue" onClick={onClose} className={classes.button}>
          {t("actionModal.close")}
        </Button>
        {onConfirm != null && (
          <Button variant="green" onClick={onConfirm} className={classes.button}>
            {confirmText}
          </Button>
        )}
      </div>
    </Modal>
  );
}
