import * as UI from "@/ui";
import * as LabelPrimitive from "@radix-ui/react-label";
import { t } from "i18next";
import React from "react";
import { FormInputProps } from "./FormProps";

export interface FormLabelProps {
  label: string;
  hint?: string;
}

export const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    FormLabelProps &
    Pick<FormInputProps, "required">
>(({ label, hint, required, ...props }, ref) => {
  const { error } = UI.useFormField();

  const _hint = hint ? hint : required ? t("common.required") : undefined;
  const _hintClassName = error ? "text-destructive font-semibold" : "";
  return (
    <UI.FormLabel ref={ref} className='flex justify-between text-sm' {...props}>
      <span className={`block font-semibold ${_hintClassName}`}>{label}</span>
      {_hint && <span className={`text-sm font-medium ${_hintClassName} `}>{_hint}</span>}
    </UI.FormLabel>
  );
});

FormLabel.displayName = "FormLabel";