"use client"

import { useIntl } from "react-intl"

import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { missingPoints } from "@/constants/missingPointsHrefs"

import useLang from "@/hooks/useLang"

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

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

  return (
    <div className={styles.claim}>
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p>
          {intl.formatMessage({
            id: "points.claimPoints.missingPreviousStay",
            defaultMessage: "Missing a previous stay?",
          })}
        </p>
      </Typography>
      <ButtonLink
        href={missingPoints[lang]}
        variant="Text"
        target="_blank"
        size="Small"
        typography="Body/Supporting text (caption)/smBold"
      >
        {intl.formatMessage({
          id: "points.claimPoints.cta",
          defaultMessage: "Claim points",
        })}
        <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
      </ButtonLink>
    </div>
  )
}