"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState, type FormEvent } from "react";
import { Search } from "lucide-react";

const POPULAR = ["MS TMT", "MS Pipe", "MS Angle", "MS Channel", "MS Billet"];

/** Hero product search → the catalogue's server-side `?search=` filter. */
export default function HeroSearch() {
  const router = useRouter();
  const [query, setQuery] = useState("");

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const term = query.trim();
    router.push(term ? `/products?search=${encodeURIComponent(term)}` : "/products");
  };

  return (
    <div>
      <form
        onSubmit={onSubmit}
        role="search"
        className="flex items-center gap-2 rounded-2xl bg-white p-1.5 shadow-[0_20px_50px_rgba(0,0,0,0.35)] ring-1 ring-white/20"
      >
        <label htmlFor="hero-search" className="sr-only">
          Search products
        </label>
        <Search size={18} className="ml-3 shrink-0 text-slate-400" aria-hidden />
        <input
          id="hero-search"
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Search TMT, pipes, angles, billets…"
          className="h-11 min-w-0 flex-1 bg-transparent text-[15px] text-slate-800 placeholder:text-slate-400 focus:outline-none"
        />
        <button
          type="submit"
          className="h-11 shrink-0 rounded-xl bg-[#CC1414] px-4 text-sm font-semibold text-white transition-colors hover:bg-[#A50E0E] sm:px-6"
        >
          Search
        </button>
      </form>
      <div className="mt-3 flex flex-wrap items-center gap-2 text-xs">
        <span className="text-white/60">Popular:</span>
        {POPULAR.map((term) => (
          <Link
            key={term}
            href={`/products?search=${encodeURIComponent(term)}`}
            className="rounded-full border border-white/20 bg-white/10 px-2.5 py-1 font-medium text-white/85 backdrop-blur transition-colors hover:border-white/40 hover:bg-white/20 hover:text-white"
          >
            {term}
          </Link>
        ))}
      </div>
    </div>
  );
}