import { Search } from "lucide-react";

const SearchBar = () => {
  return (
    <div className="flex flex-1 max-w-sm mx-4">
      <div className="relative w-full">
        <input
          type="text"
          placeholder="Search products, brands..."
          className="w-full h-10 pl-10 pr-4 rounded-full border border-gray-300 text-sm sm:text-base
                     focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary
                     transition-shadow duration-300 shadow-sm hover:shadow-md"
        />
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
      </div>
    </div>
  );
};

export default SearchBar;