import { useIntl } from "react-intl"

import {
  bookingTermsAndConditions,
  privacyPolicy,
} from "@/constants/currentWebHrefs"

import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"

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

export default function TermsAndConditions() {
  const intl = useIntl()
  const lang = useLang()

  return (
    <>
      <Caption>
        {intl.formatMessage(
          {
            defaultMessage:
              "I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic requires a valid payment card during my visit in case anything is left unpaid.",
          },
          {
            termsAndConditionsLink: (str) => (
              <Link
                className={styles.link}
                variant="underscored"
                href={bookingTermsAndConditions[lang]}
                target="_blank"
                weight="bold"
                size="small"
              >
                {str}
              </Link>
            ),
            privacyPolicyLink: (str) => (
              <Link
                className={styles.link}
                variant="underscored"
                href={privacyPolicy[lang]}
                target="_blank"
                weight="bold"
                size="small"
              >
                {str}
              </Link>
            ),
          }
        )}
      </Caption>
      <Checkbox name="termsAndConditions">
        <Caption>
          {intl.formatMessage({
            defaultMessage: "I accept the terms and conditions",
          })}
        </Caption>
      </Checkbox>
      <Checkbox name="smsConfirmation">
        <Caption>
          {intl.formatMessage({
            defaultMessage:
              "I would like to get my booking confirmation via sms",
          })}
        </Caption>
      </Checkbox>
    </>
  )
}