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

import ExpirationDate from "@/components/Rewards/ExpirationDate"
import { getEarliestExpirationDate } from "@/utils/rewards"

import Card from "./Card"

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

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

export default function Slide({ surprise }: SlideProps) {
  const earliestExpirationDate = getEarliestExpirationDate(surprise)

  return (
    <Card title={surprise.label}>
      <Typography variant="Body/Paragraph/mdRegular">
        <p className={styles.textCenter}>{surprise.description}</p>
      </Typography>
      {earliestExpirationDate ? (
        <ExpirationDate expirationDate={earliestExpirationDate} />
      ) : null}
    </Card>
  )
}