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

import Card from "./Card"

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

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

  return (
    <Card title={surprise.label}>
      <Body textAlign="center">{surprise.description}</Body>
      {earliestExpirationDate ? (
        <ExpirationDate expirationDate={earliestExpirationDate} />
      ) : null}
    </Card>
  )
}
