import { Input } from "@/components/ui/input"
import { Search } from "lucide-react";
import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";

const SearchBar = () => {

  const [searchQuery, setSearchQuery] = useState<string>('');
  const searchParams = useSearchParams()

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Searching for:', searchQuery);
  };


  useEffect(() => {
    setSearchQuery(searchParams?.get('query') ?? '')
  },[])


  return(
    <>
      <form 
        onSubmit={handleSearch}
        className="hidden sm:flex flex-1 mx-4 max-w-md relative"
      >
        <div className="relative w-full">
          <Input
            type="search"
            placeholder="Search courses..."
            className="w-full pl-10 bg-purple-700/10 border-white/20 text-white placeholder:text-white/50 focus:ring-[#9333EA] focus:border-[#9333EA]"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/50" />
        </div>
      </form>
      <div className="sm:hidden px-4 pb-4">
        <form onSubmit={handleSearch} className="relative">
          <Input
            type="search"
            placeholder="Search courses..."
            className="w-full pl-10 bg-white/10 border-white/20 text-white placeholder:text-white/50 focus:ring-[#9333EA] focus:border-[#9333EA]"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/50" />
        </form>
      </div>
    </>
  )
}

export default  SearchBar