import React, { useState } from "react";
import search from "./search-normal.svg";
import zarbedar from "./zarbedar-icon.svg";
const SearchBox = ({ cancleIcon, searchIcon, placeholder, className }) => {
const [activeSearchBox, setActiveSearchBox] = useState(false);
return (
{activeSearchBox && (

setActiveSearchBox(false)}
/>
)}
{searchIcon && (

)}
setActiveSearchBox(true)}
// onBlur={() => setActiveSearchBox(false)}
type="text"
placeholder={placeholder}
className={`${className} w-[100%] text-xs focus:outline-none rounded border focus:ring focus:ring-opacity-20`}
/>
);
};
export default SearchBox;
SearchBox.defaultProps = {
cancleIcon: zarbedar,
searchIcon: search,
placeholder: "دنبال چه چیزی هستید",
className:
"text-blue-400 bg-[#F9FBFF] placeholder-blue-300 border-[#B5D6FF] focus:border-blue-200 focus:ring-blue-200",
};