import { useIntl } from "react-intl"

import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import Card from "./Card"

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

export default function Initial({ totalSurprises, onOpen }: InitialProps) {
  const intl = useIntl()

  return (
    <Card title={intl.formatMessage({ id: "Surprise!" })}>
      <Body textAlign="center">
        {totalSurprises > 1 ? (
          <>
            {intl.formatMessage(
              {
                id: "You have <b>{amount}</b> gifts waiting for you!",
              },
              {
                amount: totalSurprises,
                b: (str) => <b>{str}</b>,
              }
            )}
            <br />
            {intl.formatMessage({
              id: "Hurry up and use them before they expire!",
            })}
          </>
        ) : (
          intl.formatMessage({
            id: "We have a special gift waiting for you!",
          })
        )}
      </Body>
      <Caption>
        {intl.formatMessage({
          id: "You'll find all your gifts in 'My benefits'",
        })}
      </Caption>

      <Button
        intent="primary"
        onPress={onOpen}
        size="medium"
        theme="base"
        fullWidth
        autoFocus
      >
        {intl.formatMessage(
          {
            id: "Open {amount, plural, one {gift} other {gifts}}",
          },
          { amount: totalSurprises }
        )}
      </Button>
    </Card>
  )
}
