import { useIntl } from "react-intl"

import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"

import useRedeemFlow from "./useRedeemFlow"

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

export function ConfirmClose({ close }: { close: () => void }) {
  const intl = useIntl()
  const { setRedeemStep } = useRedeemFlow()

  return (
    <>
      <div className={styles.modalContent}>
        <Title level="h3" textAlign="center" textTransform="regular">
          {intl.formatMessage({
            defaultMessage: "If you close this your benefit will be removed",
          })}
        </Title>
        <Body>
          {intl.formatMessage({
            defaultMessage: "Have you showed this benefit to the hotel staff?",
          })}
        </Body>
        <Body>
          {intl.formatMessage({
            defaultMessage:
              "If not, please go back and do so before you close this. Once you close this your benefit will be void and removed from My Benefits.",
          })}
        </Body>
      </div>
      <footer className={styles.modalFooter}>
        <Button
          onClick={() => setRedeemStep("redeemed")}
          intent="primary"
          theme="base"
        >
          {intl.formatMessage({
            defaultMessage: "No, go back",
          })}
        </Button>
        <Button onClick={close} intent="secondary" theme="base">
          {intl.formatMessage({
            defaultMessage: "Yes, close and remove benefit",
          })}
        </Button>
      </footer>
    </>
  )
}
