import { BlurView } from "expo-blur";
import React from "react";
import { Image, TextInput, View } from "react-native";
import { icons } from "../assets";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import Style from "../styles/Style";

const SearchBar = ({
  placeholder = "Que souhaites-tu écouter?",
  textInputProps = {},
}) => {
  return (
    <View style={{ borderRadius: 12, overflow: "hidden" }}>
      <BlurView
        intensity={80}
        style={{
          height: 40,
          paddingHorizontal: 8,
          gap: 10,
          ...Style.containerRow,
          backgroundColor: "Palette.ultraLightBlack",
        }}
      >
        <Image source={icons.search} />
        <TextInput
          placeholder={placeholder}
          placeholderTextColor={Palette.gray}
          style={{
            fontSize: 12,
            color: Palette.white,
            fontFamily: FONT_FAMILY.HelveticaNeueRegular,
            flex: 1,
          }}
          {...textInputProps}
        />
      </BlurView>
    </View>
  );
};

export default SearchBar;