"use client"
import { useIntl } from "react-intl"

import { Divider } from "@scandic-hotels/design-system/Divider"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { Typography } from "@scandic-hotels/design-system/Typography"

import TermsAndConditions from "../Payment/TermsAndConditions"
import Guarantee from "./Guarantee"

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

import type { CreditCard } from "@scandic-hotels/trpc/types/user"

interface ConfirmBookingProps {
  savedCreditCards: CreditCard[] | null
}

export default function ConfirmBooking({
  savedCreditCards,
}: ConfirmBookingProps) {
  const intl = useIntl()
  return (
    <div className={styles.container}>
      <div className={styles.selections}>
        <Guarantee savedCreditCards={savedCreditCards} />
        <Divider color="Border/Divider/Default" />
        <Checkbox name="smsConfirmation">
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <span>
              {intl.formatMessage({
                id: "booking.smsConfirmationLabel",
                defaultMessage:
                  "I would like to get my booking confirmation via sms",
              })}
            </span>
          </Typography>
        </Checkbox>
      </div>
      <div className={styles.checkboxContainer}>
        <TermsAndConditions isFlexBookingTerms />
      </div>
    </div>
  )
}

export function ConfirmBookingRedemption() {
  const intl = useIntl()
  return (
    <div className={styles.container}>
      <div className={styles.selections}>
        <Checkbox name="smsConfirmation">
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <span>
              {intl.formatMessage({
                id: "booking.smsConfirmationLabel",
                defaultMessage:
                  "I would like to get my booking confirmation via sms",
              })}
            </span>
          </Typography>
        </Checkbox>
      </div>
      <div className={styles.guaranteeContainer}>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>
            {intl.formatMessage({
              id: "enterDetails.confirmBooking.redemptionGuaranteeInfo",
              defaultMessage:
                "When you confirm the booking the room will be guaranteed for late arrival. If you fail to arrive without cancelling in advance or if you cancel after 18:00 local time, you will be charged for one reward night.",
            })}
          </p>
        </Typography>
      </div>
      <div className={styles.checkboxContainer}>
        <TermsAndConditions isFlexBookingTerms />
      </div>
    </div>
  )
}