"use client"

import { useIntl } from "react-intl"

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

import { CheckIcon } from "@/components/Icons"
import LoginButton from "@/components/LoginButton"
import useLang from "@/hooks/useLang"

import Link from "../../Link"
import Caption from "../../Text/Caption"
import Footnote from "../../Text/Footnote"
import Checkbox from "../Checkbox"

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

type JoinScandicFriendsCardProps = {
  name: string
  difference: { price: number; currency: string }
}

export default function JoinScandicFriendsCard({
  name,
  difference,
}: JoinScandicFriendsCardProps) {
  const lang = useLang()
  const intl = useIntl()

  const list = [
    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
    { title: intl.formatMessage({ id: "Join at no cost" }) },
  ]

  return (
    <div className={styles.cardContainer}>
      <header className={styles.header}>
        <Checkbox name={name} className={styles.checkBox}>
          <div>
            <Caption type="label" textTransform="uppercase" color="red">
              {intl.formatMessage(
                {
                  id: "Only pay {amount} {currency}",
                },
                {
                  amount: intl.formatNumber(difference.price),
                  currency: difference.currency,
                }
              )}
            </Caption>
            <Caption
              type="label"
              textTransform="uppercase"
              color="uiTextHighContrast"
            >
              {intl.formatMessage({ id: "Join Scandic Friends" })}
            </Caption>
          </div>
        </Checkbox>

        <Footnote color="uiTextHighContrast">
          {intl.formatMessage({ id: "Already a friend?" })}{" "}
          <LoginButton
            color="burgundy"
            position="enter details"
            trackingId="join-scandic-friends-enter-details"
            variant="breadcrumb"
            target="_blank"
          >
            {intl.formatMessage({ id: "Log in" })}
          </LoginButton>
        </Footnote>
      </header>

      <div className={styles.list}>
        {list.map((item) => (
          <Caption
            key={item.title}
            color="uiTextPlaceholder"
            className={styles.listItem}
          >
            <CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
          </Caption>
        ))}
      </div>
      <Footnote color="uiTextPlaceholder">
        {intl.formatMessage<React.ReactNode>(
          {
            id: "signup.terms",
          },
          {
            termsLink: (str) => (
              <Link
                variant="default"
                textDecoration="underline"
                size="tiny"
                target="_blank"
                color="uiTextPlaceholder"
                href={privacyPolicy[lang]}
              >
                {str}
              </Link>
            ),
          }
        )}
      </Footnote>
    </div>
  )
}