import { LucideIcon } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Text } from './Text';

export interface FormFieldProps {
  label?: string;
  error?: string;
  hint?: string;
  required?: boolean;
  icon?: LucideIcon;
  children: ReactNode;
}

export const FormField = ({ 
  label, 
  error, 
  hint, 
  required, 
  icon, 
  children 
}: FormFieldProps) => {
  return (
    <Box marginBottom={4}>
      {label && (
        <Box display="flex" alignItems="center" gap={2} marginBottom={1.5}>
          {icon && <Icon icon={icon} size={4} intent="low" />}
          <Text size="sm" weight="medium" variant="high">
            {label}
          </Text>
          {required && <Text variant="critical">*</Text>}
        </Box>
      )}
      
      {children}
      
      {error && (
        <Box marginTop={1}>
          <Text size="xs" variant="critical" block>
            {error}
          </Text>
        </Box>
      )}
      
      {hint && !error && (
        <Box marginTop={1}>
          <Text size="xs" variant="low" block>
            {hint}
          </Text>
        </Box>
      )}
    </Box>
  );
};