import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import useLang from "@/hooks/useLang" import Card from "./Card" import styles from "./surprises.module.css" import type { SlideProps } from "@/types/components/blocks/surprises" export default function Slide({ surprise, membershipNumber }: SlideProps) { const lang = useLang() const intl = useIntl() const earliestExpirationDate = surprise.coupons?.reduce( (earliestDate, coupon) => { const expiresAt = dt(coupon.expiresAt) return earliestDate.isBefore(expiresAt) ? earliestDate : expiresAt }, dt() ) return ( {surprise.description}

{intl.formatMessage( { id: "Expires at the earliest" }, { date: dt(earliestExpirationDate) .locale(lang) .format("D MMM YYYY"), } )} {intl.formatMessage({ id: "Membership ID", })}{" "} {membershipNumber}

) }