import { useIntl } from "react-intl"

import Image from "@/components/Image"
import Title from "@/components/TempDesignSystem/Text/Title"

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({ id: "Surprise!" })}
      />
      <header>
        <Title textAlign="center" level="h4">
          {title}
        </Title>
      </header>

      {children}
    </div>
  )
}