import { dt } from "@scandic-hotels/common/dt"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { getLang } from "@/i18n/serverContext"
import { getSasTierExpirationDate } from "@/utils/sas"

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

import type { EurobonusMembership } from "@scandic-hotels/trpc/types/user"
import type { IntlShape } from "react-intl"

interface SasBoostStatusProps {
  sasMembership: EurobonusMembership
  intl: IntlShape
}

export default async function SasBoostStatus({
  sasMembership,
  intl,
}: SasBoostStatusProps) {
  const lang = await getLang()
  const tierExpirationDate = getSasTierExpirationDate(sasMembership)

  if (!tierExpirationDate || sasMembership.boostedByScandic) {
    return null
  }

  const sasBoostExpiryText = intl.formatMessage(
    {
      id: "membershipOverViewCard.sasBoostedUntilDate",
      defaultMessage: "Boosted by SAS until {date}",
    },
    {
      date: dt(tierExpirationDate).locale(lang).format("D MMM YYYY"),
    }
  )

  return (
    <>
      <Divider variant="vertical" color="Border/Divider/Accent" />
      <Typography variant="Label/xsRegular">
        <span className={styles.sasBoostText}>{sasBoostExpiryText}</span>
      </Typography>
    </>
  )
}