"use client"

import { useIntl } from "react-intl"

import Footnote from "@scandic-hotels/design-system/Footnote"

import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"

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

export default function SignupPromoMobile() {
  return (
    <div
      data-footer-spacing-signup
      className={styles.memberDiscountBannerMobile}
    >
      <Footnote color="burgundy">
        <Message />
      </Footnote>
    </div>
  )
}

function Message() {
  const intl = useIntl()
  const config = useBookingFlowConfig()

  if (config.variant === "partner-sas") {
    return intl.formatMessage({
      id: "signup.toGetTheScandicMemberPrice",
      defaultMessage: "Enter ID or join to get the Scandic Friends price.",
    })
  }

  return intl.formatMessage({
    id: "signup.joinOrLoginForMemberPricing",
    defaultMessage: "Join or log in while booking for member pricing.",
  })
}