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

const SearchBar = ({
  placeholder = "Que souhaites-tu écouter?",
  textInputProps = {},
}) => {
  return (
    <View style={{ borderRadius: 12, overflow: "hidden" }}>
      <BlurView
        intensity={10}
        style={{
          height: 40,
          paddingHorizontal: 8,
          gap: 10,
          ...Style.containerRow,
        }}
        // experimentalBlurMethod={
        //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
        // }
      >
        <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;