"use client";

import { Button } from "@/shared/components/button/button";
import { Search } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";

export function HeroSearch() {
  const router = useRouter();
  const [input, setInput] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInput(e.target.value);
  };
  const handleSearch = () => {
    const searchParams = new URLSearchParams();

    if (input) searchParams.set("query", input);
    searchParams.set("open-catalog", "true");

    router.push(`/maps?${searchParams.toString()}`);
  };

  const openMap = () => {
    router.push(`/maps?open-catalog=true`);
  };

  return (
    <div className="@container/hero-search container pb-20">
      <div className="mx-auto flex max-w-[786px] flex-col gap-4 rounded-2xl bg-white @xl/hero-search:flex-row @xl/hero-search:py-2 @xl/hero-search:pr-2 @xl/hero-search:pl-8 @3xl/hero-search:mb-[150px]">
        <div className="flex grow items-center gap-x-3 rounded-2xl bg-white px-3.5 py-4 @xl/hero-search:p-0">
          <Search className="shrink-0 text-gray-400" size={18} />
          <input
            type="text"
            placeholder="Eksplor data berdasarkan tema atau kata kunci"
            className="w-full outline-0"
            value={input}
            onChange={handleChange}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                handleSearch();
              }
            }}
          />
        </div>

        <div className="flex flex-col gap-2 px-3 pb-2 @xl/hero-search:flex-row @xl/hero-search:items-center @xl/hero-search:p-0 @2xl/hero-search:grid @2xl/hero-search:grid-cols-[1fr_1px_1fr]">
          <Button variant="danger" onClick={handleSearch}>
            Cari
          </Button>
          <div className="hidden h-9 w-px bg-zinc-300 @xl/hero-search:block" />
          <Button variant="primary" onClick={openMap}>
            Buka peta
          </Button>
        </div>
      </div>
    </div>
  );
}