import { useIntl } from "react-intl"

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

import Image from "@/components/Image"

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

import type { CardProps } from "@/types/components/blocks/surprises"

export default function Card({ title, children }: CardProps) {
  const intl = useIntl()

  return (
    <div className={styles.content}>
      <Image
        src="/_static/img/rewards/loyalty-award.png"
        width={113}
        height={125}
        alt={intl.formatMessage({
          defaultMessage: "Surprise!",
        })}
      />
      <header>
        <Typography variant="Title/smRegular">
          <h4 className={styles.title}>{title}</h4>
        </Typography>
      </header>

      {children}
    </div>
  )
}