import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";

export function SearchForm({ defaultValue, placeholder = "بحث" }: { defaultValue?: string; placeholder?: string }) {
  return (
    <form className="mb-5 flex max-w-lg gap-2" role="search">
      <div className="relative flex-1">
        <Search className="absolute right-3 top-3.5 text-[var(--ink-faint)]" size={17} aria-hidden />
        <Input name="q" defaultValue={defaultValue} placeholder={placeholder} className="pr-10" />
      </div>
      <button className="h-11 rounded-md bg-[var(--ink)] px-4 text-sm font-bold text-white">بحث</button>
    </form>
  );
}