"use client"

import { useIntl } from "react-intl"

import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { formatPrice } from "@/utils/numberFormatting"

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

import type { SignupPromoProps } from "@/types/components/hotelReservation/signupPromo"

export default function SignupPromoDesktop({
  memberPrice,
  badgeContent,
}: SignupPromoProps) {
  const intl = useIntl()
  if (!memberPrice) {
    return null
  }
  const { amount, currency } = memberPrice
  const price = formatPrice(intl, amount, currency)

  return memberPrice ? (
    <div
      className={styles.memberDiscountBannerDesktop}
      data-testid="signup-promo-desktop"
    >
      {badgeContent && <span className={styles.badge}>{badgeContent}</span>}
      <Footnote color="burgundy">
        {intl.formatMessage<React.ReactNode>(
          {
            id: "To get the member price <span>{price}</span>, log in or join when completing the booking.",
          },
          {
            span: (str) => (
              <Caption color="red" type="bold" asChild>
                <span>{str}</span>
              </Caption>
            ),
            price,
          }
        )}
      </Footnote>
    </div>
  ) : null
}