import { ReactNode } from 'react';
import { defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';

interface FormFieldProps {
  children: ReactNode;
  label?: string;
  error?: string;
  helperText?: string;
  required?: boolean;
  className?: string;
  config?: Partial<LayoutConfig>;
  htmlFor?: string;
}

export function FormField({
  children,
  label,
  error,
  helperText,
  required = false,
  className = '',
  config = {},
  htmlFor,
}: FormFieldProps) {
  const layoutConfig = { ...defaultLayoutConfig, ...config };
  
  return (
    <div className={`${className}`} dir={layoutConfig.direction}>
      {label && (
        <label 
          htmlFor={htmlFor}
          className={`block text-sm font-medium mb-2 ${error ? 'text-red-700' : 'text-gray-700'} ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}
        >
          {label}
          {required && <span className="text-red-500 mr-1">*</span>}
        </label>
      )}
      
      {children}
      
      {error && (
        <p className={`mt-2 text-sm text-red-600 ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}>
          {error}
        </p>
      )}
      
      {helperText && !error && (
        <p className={`mt-2 text-sm text-gray-500 ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}>
          {helperText}
        </p>
      )}
    </div>
  );
}