import classNames from "clsx"
import useTranslation from "next-translate/useTranslation"
import type { FetchState as FormStateType } from "react-component-form"

import { Loader } from "../Loader"

export interface FormStateProps extends React.ComponentPropsWithoutRef<"div"> {
  state: FormStateType
  message?: string | null
  id?: string
}

export const FormState: React.FC<FormStateProps> = (props) => {
  const { state, message, id, ...rest } = props
  const { t } = useTranslation()

  if (state === "loading") {
    return (
      <div data-cy="loader" className="mt-8 flex justify-center">
        <Loader />
      </div>
    )
  }

  if (state === "idle" || message == null) {
    return null
  }

  return (
    <div
      {...rest}
      className={classNames(
        props.className,
        "mt-6 flex max-w-xl items-center text-center font-medium",
        {
          "text-red-800 dark:text-red-400": state === "error",
          "text-green-800 dark:text-green-400": state === "success",
        },
      )}
    >
      <div className="inline bg-cover font-headline" />
      <span id={id} className="pl-2">
        <b>{t(`errors:${state}`)}:</b> {message}
      </span>
    </div>
  )
}