'use client';

import React from 'react';

interface FormFieldProps {
  label: string;
  icon?: React.ElementType;
  children: React.ReactNode;
  required?: boolean;
  error?: string;
  hint?: string;
}

/**
 * Form field wrapper with label, optional icon, required indicator, and error/hint display.
 * Used for consistent form field layout throughout the app.
 */
export default function FormField({ 
  label, 
  icon: Icon, 
  children,
  required = false,
  error,
  hint,
}: FormFieldProps) {
  return (
    <div className="space-y-2">
      <label className="block text-sm font-medium text-gray-300">
        <div className="flex items-center gap-2">
          {Icon && <Icon className="w-4 h-4 text-gray-500" />}
          {label}
          {required && <span className="text-racing-red">*</span>}
        </div>
      </label>
      {children}
      {error && (
        <p className="text-xs text-racing-red mt-1">{error}</p>
      )}
      {hint && !error && (
        <p className="text-xs text-gray-500 mt-1">{hint}</p>
      )}
    </div>
  );
}