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 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()

  if (!sasMembership.boostedTierExpires) return null

  const sasBoostExpiryText = intl.formatMessage(
    {
      defaultMessage: "Boosted by SAS until {date}",
    },
    {
      date: dt(sasMembership.boostedTierExpires)
        .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>
    </>
  )
}