"use client";

import { FormEvent } from "react";
import { Search } from "lucide-react";
import { useRouter } from "next/navigation";

export function HeaderSearch({ className = "" }: { className?: string }) {
  const router = useRouter();

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    router.push("/#parts");
  };

  return (
    <form onSubmit={onSubmit} className={`relative ${className}`}>
      <input
        name="q"
        placeholder="جستجوی قطعه..."
        className="h-11 w-full rounded-xl bg-paper pe-4 ps-10 text-[13px] outline-none placeholder:text-muted/70 focus:bg-white focus:ring-1 focus:ring-brand"
      />
      <Search className="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted" />
    </form>
  );
}