import type { ReactNode } from "react";

import {
  cn,
  fieldErrorClass,
  fieldHelpClass,
  fieldLabelClass,
} from "@/lib/ui/variants";

interface FieldProps {
  label: string;
  children: ReactNode;
  htmlFor?: string;
  help?: ReactNode;
  error?: ReactNode;
  required?: boolean;
  className?: string;
}

export function Field({
  label,
  children,
  htmlFor,
  help,
  error,
  required = false,
  className,
}: FieldProps) {
  const labelText = required ? `${label} *` : label;
  return (
    <div className={cn("space-y-1.5", className)}>
      <label htmlFor={htmlFor} className={fieldLabelClass()}>
        {labelText}
      </label>
      {children}
      {error ? <p className={fieldErrorClass()}>{error}</p> : null}
      {!error && help ? <p className={fieldHelpClass()}>{help}</p> : null}
    </div>
  );
}