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 (
    <Card title={surprise.label}>
      <Body textAlign="center">{surprise.description}</Body>
      <div className={styles.badge}>
        <Caption>
          {intl.formatMessage(
            { id: "Valid through {expirationDate}" },
            {
              expirationDate: dt(earliestExpirationDate)
                .locale(lang)
                .format("D MMM YYYY"),
            }
          )}
        </Caption>
        <Caption>
          {intl.formatMessage(
            {
              id: "Membership ID {id}",
            },
            {
              id: membershipNumber,
            }
          )}
        </Caption>
      </div>
    </Card>
  )
}
