import { InputErrorMessage } from './InputErrorMessage';

interface FormFieldProps {
  label: string;
  required?: boolean;
  error?: string;
  className?: string;
  children: React.ReactNode;
  fieldName: string;
}

export const FormField = ({
  label,
  error,
  className,
  fieldName,
  children,
  required = false,
}: FormFieldProps) => (
  <div className={`relative pb-4 ${className}`}>
    <label
      className="text-text-primary 3xl:text-lg mb-2 block text-sm font-medium"
      htmlFor={fieldName}
    >
      {label}
      {required && <span className="font-bold text-red-600"> *</span>}
    </label>
    {children}
    <InputErrorMessage
      message={error}
      className={error ? 'absolute bottom-0' : ''}
      describedBy={`${fieldName}-error`}
    />
  </div>
);