import { useIntl } from "react-intl"

import { Button } from "@scandic-hotels/design-system/Button"
import { Typography } from "@scandic-hotels/design-system/Typography"

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}>
        <Typography variant="Title/smLowCase" className={styles.rewardLabel}>
          <h3>
            {intl.formatMessage({
              id: "redeem.confirmClose.title",
              defaultMessage: "If you close this your benefit will be removed",
            })}
          </h3>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              id: "redeem.confirmClose.question",
              defaultMessage:
                "Have you showed this benefit to the hotel staff?",
            })}
          </p>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              id: "redeem.confirmClose.info",
              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.",
            })}
          </p>
        </Typography>
      </div>
      <footer className={styles.modalFooter}>
        <Button onPress={() => setRedeemStep("redeemed")} variant="Primary">
          {intl.formatMessage({
            id: "redeem.confirmClose.goBack",
            defaultMessage: "No, go back",
          })}
        </Button>
        <Button onPress={close} variant="Secondary">
          {intl.formatMessage({
            id: "redeem.confirmClose.confirm",
            defaultMessage: "Yes, close and remove benefit",
          })}
        </Button>
      </footer>
    </>
  )
}