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

import { getIntl } from "@/i18n"

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

interface SuccessCardProps {
  pointsEarned?: number | null
}

export default async function SuccessCard({ pointsEarned }: SuccessCardProps) {
  const intl = await getIntl()
  return (
    <div className={styles.card}>
      <TrophyIcon className={styles.icon} width={79} height={118} />
      <div className={styles.content}>
        <Typography variant="Title/Subtitle/md">
          <h3 className={styles.title}>
            {intl.formatMessage({
              defaultMessage: "Hello Best Friend!",
            })}
          </h3>
        </Typography>
        {pointsEarned && (
          <Typography variant="Body/Paragraph/mdRegular">
            <p>
              {intl.formatMessage(
                {
                  defaultMessage:
                    "You've earned {pointAmount} points this member year.",
                },
                {
                  pointAmount: (
                    <strong>{intl.formatNumber(pointsEarned)}</strong>
                  ),
                }
              )}
            </p>
          </Typography>
        )}
      </div>
    </div>
  )
}