import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { env } from "@/env/server"

import { getIntl } from "@/i18n"

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

import type { User } from "@/types/user"

interface DigitalTeamMemberCardProps {
  user: User
}

export default async function DigitalTeamMemberCard(
  // TODO: Make a check whether user is eligible for benefits or not
  _props: DigitalTeamMemberCardProps
) {
  if (!env.ENABLE_DTMC) {
    return null
  }

  const intl = await getIntl()

  return (
    <button className={styles.card} type="button">
      <Typography variant="Body/Paragraph/mdBold">
        <span className={styles.text}>
          {/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */}
          <MaterialIcon icon="id_card" size={24} color="CurrentColor" />
          {intl.formatMessage({ defaultMessage: "Show Team Member Card" })}
        </span>
      </Typography>
    </button>
  )
}