"use client"

import { useIntl } from "react-intl"

import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Caption from "@scandic-hotels/design-system/Caption"
import Footnote from "@scandic-hotels/design-system/Footnote"

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

type SignupPromoProps = {
  memberPrice: {
    amount: number
    currency: string
  }
  badgeContent?: string
  isEnterDetailsPage?: boolean
}

export default function SignupPromoDesktop({
  memberPrice,
  badgeContent,
  isEnterDetailsPage = false,
}: 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">
        {isEnterDetailsPage
          ? intl.formatMessage(
              {
                defaultMessage:
                  "To get the member room 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,
              }
            )
          : intl.formatMessage(
              {
                defaultMessage:
                  "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
}