import { View, Text, TextInput } from "react-native";
import React from "react";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";

const CustomInput = ({
  label = "",
  placeholder = "",
  value,
  setValue,
  height = 65,
}) => {
  return (
    <View style={{ gap: 8 }}>
      {label && (
        <Text
          style={{
            fontSize: 16,
            color: Palette.white,
            fontFamily: FONT_FAMILY.InterMedium,
          }}
        >
          {label}
        </Text>
      )}
      <View
        style={{
          backgroundColor: Palette.white,
          height,
          padding: 12,
          borderRadius: 12,
        }}
      >
        <TextInput
          placeholder={placeholder}
          placeholderTextColor={Palette.grayMid}
          value={value}
          onChangeText={setValue}
          style={{
            height: "100%",
            fontSize: 16,
            color: Palette.black,
            fontFamily: FONT_FAMILY.InterRegularItalic,
          }}
          multiline
          textAlignVertical="top"
        />
      </View>
    </View>
  );
};

export default CustomInput;
