import { View } from "react-native";
import { TextInput } from "react-native-paper";

import { SizeEnum } from "@/constants/sizeEnum";

interface SearchBarProps {
  searchQuery: string;
  onChange: (query: string) => void;
  placeholderText?: string;
  size?: SizeEnum;
}

export const SearchBar = ({
  searchQuery,
  onChange,
  placeholderText = "Search",
  size = SizeEnum.Regular,
}: SearchBarProps) => {
  const isSmall = size === SizeEnum.Small;

  return (
    <View>
      <TextInput
        placeholder={placeholderText}
        value={searchQuery}
        onChangeText={onChange}
        mode="outlined"
        right={
          searchQuery ? (
            <TextInput.Icon icon="close" onPress={() => onChange("")} />
          ) : (
            <TextInput.Icon icon="magnify" size={isSmall ? 20 : 24} />
          )
        }
        style={isSmall ? { height: 40, fontSize: 14 } : undefined}
        contentStyle={isSmall ? { paddingTop: 0, paddingBottom: 0 } : undefined}
        outlineStyle={[
          isSmall ? { borderRadius: 24 } : undefined,
          { borderColor: "transparent" },
        ]}
        placeholderTextColor="#d9d9d9"
      />
    </View>
  );
};