import React from "react";
import { View, TextInput, StyleSheet } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "../config/colors";
import defaultStyles from "../config/styles";
import { Shadow } from "react-native-shadow-2";

function AppTextInput({ icon, width = "100%", ...otherProps }) {
  return (
    <Shadow
      viewStyle={{ width: width, height: otherProps.numberOfLines * 24 }}
      offset={[0, 3]}
      distance={3}
      radius={4}
      startColor="rgba(0, 0, 0, 0.15)"
      paintInside={true}
    >
      <View style={[styles.container, { width }]}>
        {icon && (
          <MaterialCommunityIcons
            name={icon}
            size={20}
            color={defaultStyles.colors.medium}
            style={styles.icon}
          />
        )}
        <TextInput
          style={defaultStyles.text}
          placeholderTextColor={colors.medium}
          {...otherProps}
        />
      </View>
    </Shadow>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.white,
    borderRadius: 6,
    borderColor: colors.grayBG,
    borderWidth: 1,
    padding: 5,
    paddingLeft: 12,
  },
  icon: {
    marginRight: 10,
  },
});

export default AppTextInput;