import { View } from 'react-native';

import { Text } from '../../atoms/Text';
import { cn } from '../../lib/cn';

import type { FormFieldProps } from './FormField.types';

/**
 * Wrapper genérico para campos de formulario.
 * Maneja label, helper y mensajes de error con tono semántico.
 */
export function FormField({
  label,
  helperText,
  error,
  required = false,
  children,
  className,
  labelClassName,
  helperClassName,
}: FormFieldProps) {
  const errorMessage = typeof error === 'string' ? error : undefined;
  const hasError = Boolean(error);
  const message = errorMessage ?? helperText;

  return (
    <View className={cn('w-full gap-1', className)}>
      {label ? (
        <Text variant="subtitleMedium" className={cn('text-foreground', labelClassName)}>
          {label}
          {required ? <Text tone="danger"> *</Text> : null}
        </Text>
      ) : null}
      {children}
      {message ? (
        <Text
          variant="caption"
          tone={hasError ? 'danger' : 'muted'}
          className={cn(helperClassName)}
        >
          {message}
        </Text>
      ) : null}
    </View>
  );
}