import { Search } from "lucide-react";
import { useState, type FormEvent } from "react";

export function SearchBar({
  placeholder = "Try faith, fear, forgiveness…",
  initial = "",
  onSearch,
}: {
  placeholder?: string;
  initial?: string;
  onSearch: (q: string) => void;
}) {
  const [q, setQ] = useState(initial);
  function submit(e: FormEvent) {
    e.preventDefault();
    const v = q.trim();
    if (v) onSearch(v);
  }
  return (
    <form onSubmit={submit} className="flex w-full overflow-hidden rounded-full border border-border bg-card shadow-soft focus-within:border-[var(--gold)]">
      <div className="flex items-center pl-5 text-muted-foreground">
        <Search className="h-5 w-5" />
      </div>
      <input
        value={q}
        onChange={(e) => setQ(e.target.value)}
        placeholder={placeholder}
        className="min-w-0 flex-1 bg-transparent px-4 py-4 text-base text-foreground placeholder:text-muted-foreground/70 focus:outline-none"
      />
      <button
        type="submit"
        className="m-1.5 rounded-full bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"
      >
        Search
      </button>
    </form>
  );
}