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
  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(`common:${state}`)}:</b> {message}
        </span>
      </div>
    </>
  )
}