import { View, TextInput, Text, type TextInputProps, type ViewStyle } from "react-native";
import { useTheme } from "../theme";

interface InputProps extends TextInputProps {
  error?: string;
  label?: string;
  containerStyle?: ViewStyle;
}

export function Input({ error, label, containerStyle, style, ...props }: InputProps) {
  const theme = useTheme();

  return (
    <View style={[{ gap: theme.spacing.xs }, containerStyle]}>
      {label && (
        <Text style={{ color: theme.colors.textSecondary, ...theme.typography.captionBold }}>
          {label}
        </Text>
      )}
      <TextInput
        accessible
        accessibilityLabel={label || props.placeholder || "Внесете текст"}
        accessibilityRole="none"
        placeholderTextColor={theme.colors.textTertiary}
        style={[
          {
            backgroundColor: theme.colors.surface,
            borderColor: error ? theme.colors.error : theme.colors.border,
            borderWidth: 1.5,
            borderRadius: theme.radius.md,
            paddingVertical: 14,
            paddingHorizontal: theme.spacing.md,
            fontSize: 16,
            color: theme.colors.text,
          },
          error && { borderColor: theme.colors.error },
          typeof style === "object" ? style : undefined,
        ]}
        {...props}
      />
      {error && (
        <Text style={{ color: theme.colors.error, fontSize: 12, marginTop: 2 }}>
          {error}
        </Text>
      )}
    </View>
  );
}
