import type { ReactNode } from "react";

import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field";
import { cn } from "@/lib/utils";

type FormFieldProps = {
  label: string;
  htmlFor?: string;
  required?: boolean;
  description?: string;
  error?: { message?: string };
  className?: string;
  labelAction?: ReactNode;
  children: ReactNode;
};

export function FormField({
  label,
  htmlFor,
  required,
  description,
  error,
  className,
  labelAction,
  children,
}: FormFieldProps) {
  return (
    <Field data-invalid={!!error} className={cn("gap-1.5", className)}>
      <div className="flex items-center justify-between gap-2">
        <FieldLabel htmlFor={htmlFor} className="text-sm font-medium text-foreground">
          {label}
          {required ? <span className="text-destructive"> *</span> : null}
        </FieldLabel>
        {labelAction}
      </div>
      {children}
      {description ? <FieldDescription>{description}</FieldDescription> : null}
      <FieldError errors={[error]} />
    </Field>
  );
}