"use client"

import { useIntl } from "react-intl"

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

import { GenericError } from "./GenericError"

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

  return (
    <GenericError
      title={intl.formatMessage({ id: "Too many failed attempts." })}
      variant="info"
    >
      <Body textAlign="center">
        {intl.formatMessage({
          id: "Please wait 1 hour before trying again.",
        })}
      </Body>
      <Button theme="base" disabled>
        {intl.formatMessage({ id: "Send new code" })}
      </Button>
    </GenericError>
  )
}
