import { useIntl } from "react-intl"

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

import Card from "./Card"

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

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

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

  return (
    <Card
      title={intl.formatMessage({
        defaultMessage: "Surprise!",
      })}
    >
      <Typography variant="Body/Paragraph/mdRegular">
        <p className={styles.textCenter}>
          {totalSurprises > 1 ? (
            <>
              {intl.formatMessage(
                {
                  defaultMessage:
                    "You have <b>{amount}</b> gifts waiting for you!",
                },
                {
                  amount: totalSurprises,
                  b: (str) => <b>{str}</b>,
                }
              )}
              <br />
              {intl.formatMessage({
                defaultMessage: "Hurry up and use them before they expire!",
              })}
            </>
          ) : (
            intl.formatMessage({
              defaultMessage: "We have a special gift waiting for you!",
            })
          )}
        </p>
      </Typography>
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p>
          {intl.formatMessage({
            defaultMessage: "You'll find all your gifts in 'My benefits'",
          })}
        </p>
      </Typography>

      <Button
        variant="Primary"
        onPress={onOpen}
        size="Medium"
        autoFocus
        typography="Body/Paragraph/mdBold"
        className={styles.widthFull}
      >
        {intl.formatMessage(
          {
            defaultMessage: "Open {amount, plural, one {gift} other {gifts}}",
          },
          { amount: totalSurprises }
        )}
      </Button>
    </Card>
  )
}