"use client";

import LineLoader from "@/components/Shared/LineLoader";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import clsx from "clsx";
import { ArrowLeft, Search } from "lucide-react";
import { useRouter } from "next/navigation";
import React, { useState } from "react";

const SearchBar = ({ title }: { title: string }) => {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  return (
    <header className="z-40 sticky top-0 bg-white shadow-sm">
      <div className="container space-x-2 mx-auto px-4 py-2 flex items-center justify-between">
        <Button
          onClick={() => router.back()}
          variant={"ghost"}
          className="rounded-full !p-1 h-9 w-9"
        >
          <ArrowLeft className="h-4 w-4 !m-0" />
        </Button>
        {/* <h1 className="text-lg font-bold">{title}</h1> */}
        <div className="relative flex items-center w-full max-w-xl">
          <div className="relative bg-white w-full h-fit space-y-2 flex-grow">
            <Input
              startIcon={<Search className="icon text-neutral-700" />}
              placeholder="Search"
              className="w-full h-9" // Ensure input takes full width
            />

            {["places", "gkkkk", "dfsfsdf", "places", "gkkkk", "dfsfsdf"]
              .length < 0 && (
              <div className="absolute left-0 top-full z-10 w-full">
                <ScrollArea className="max-h-[calc(55vh-200px)] border rounded bg-white shadow z-10">
                  <div className="divide-y divide max-h-[calc(55vh-200px)] relative">
                    {[
                      "places",
                      "gkkkk",
                      "dfsfsdf",
                      "places",
                      "gkkkk",
                      "dfsfsdf",
                    ].map((place, index) => (
                      <div
                        key={index}
                        role="button"
                        className="w-full hover:bg-primary-50 flex px-3 py-3 items-center"
                      >
                        <span>{place}</span>
                      </div>
                    ))}
                    <div
                      className={clsx(
                        !isLoading && "hidden",
                        "absolute transition bg-white/70 inset-0"
                      )}
                    >
                      <LineLoader />
                    </div>
                  </div>
                </ScrollArea>
              </div>
            )}
          </div>
          <Button className="ml-2" size={"sm"}>
            Search
          </Button>
        </div>
      </div>
    </header>
  );
};

export default SearchBar;