import React from 'react';
import { AlertCircle } from 'lucide-react';
import { cn } from '@/lib/utils';

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

export function FormField({
  label,
  error,
  helperText,
  required,
  children,
  className,
}: FormFieldProps) {
  return (
    <div className={cn('space-y-1.5 w-full', className)}>
      {label && (
        <label className="flex items-center text-sm font-semibold text-text-primary">
          {label}
          {required && <span className="text-danger ml-1">*</span>}
        </label>
      )}
      
      <div className="relative">
        {children}
      </div>

      {error ? (
        <div className="flex items-center gap-1.5 text-xs text-danger font-semibold mt-1">
          <AlertCircle className="h-4 w-4 flex-shrink-0" />
          <span>{error}</span>
        </div>
      ) : (
        helperText && (
          <p className="text-xs text-text-muted mt-1 leading-normal font-medium">
            {helperText}
          </p>
        )
      )}
    </div>
  );
}