import { View, Text, TextInput, 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.caption, fontWeight: "500" }}>
          {label}
        </Text>
      )}
      <TextInput
        accessible
        accessibilityLabel={label || props.placeholder || "Внесете текст"}
        accessibilityRole="none"
        placeholderTextColor={theme.colors.textTertiary}
        style={[
          {
            backgroundColor: theme.colors.surface,
            borderWidth: 1.5,
            borderRadius: theme.radius.md,
            paddingVertical: 13,
            paddingHorizontal: theme.spacing.md,
            fontSize: 15,
            color: theme.colors.text,
            ...theme.shadows.xs,
          },
          error
            ? { borderColor: theme.colors.error, backgroundColor: theme.colors.errorLight }
            : { borderColor: theme.colors.border },
          typeof style === "object" ? style : undefined,
        ]}
        {...props}
      />
      {error && (
        <Text style={{ color: theme.colors.error, ...theme.typography.caption }}>
          {error}
        </Text>
      )}
    </View>
  );
}