"use client";
import { useRouter } from "next/navigation";
import { useState } from "react";

export function SearchBar() {
  const router = useRouter();
  const [term, setTerm] = useState("");
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        const q = term.trim();
        router.push(q ? `/search?q=${encodeURIComponent(q)}` : "/search");
      }}
      style={{ display: "flex", gap: 8, alignItems: "center" }}
    >
      <input
        value={term}
        onChange={(e) => setTerm(e.target.value)}
        placeholder="검색어 입력"
        style={{ padding: "6px 8px", border: "1px solid #ddd", borderRadius: 6 }}
      />
      <button type="submit">검색</button>
    </form>
  );
}