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

import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

interface SasBoostStatusProps {
  expiryDate: string
}

export default async function SasBoostStatus({
  expiryDate,
}: SasBoostStatusProps) {
  const lang = await getLang()
  const intl = await getIntl()

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

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