"use client"

import { useIntl } from "react-intl"

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

import Button from "@/components/TempDesignSystem/Button"

import { GenericError } from "./GenericError"

export function TooManyCodesError() {
  const intl = useIntl()

  return (
    <GenericError
      title={intl.formatMessage({
        defaultMessage: "You’ve requested too many codes",
      })}
      variant="info"
    >
      <Typography variant="Body/Paragraph/mdRegular">
        <p>
          {intl.formatMessage({
            defaultMessage: "Please wait 1 hour before trying again.",
          })}
        </p>
      </Typography>
      <Button theme="base" disabled>
        {intl.formatMessage({
          defaultMessage: "Send new code",
        })}
      </Button>
    </GenericError>
  )
}
