// src/components/Search/SearchBar.tsx
import { useState } from "react"
import { useNavigate } from "react-router-dom"

export default function SearchBar() {
  const [query, setQuery] = useState("")
  const navigate = useNavigate()

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (query.trim()) navigate(`/search?query=${encodeURIComponent(query)}`)
  }

  return (
    <form
      onSubmit={handleSubmit}
      className="flex items-center bg-surface-2 border border-border rounded-md overflow-hidden w-full max-w-md"
    >
      <input
        type="text"
        placeholder="Fırsat ara..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        className="flex-1 px-4 py-2 bg-transparent text-grey placeholder:text-text-muted focus:outline-none"
      />
      <button
        type="submit"
        className="hover:bg-primary-hover bg-grey text-white font-semibold px-4 py-2 transition cursor-pointer"
      >
        Ara
      </button>
    </form>
  )
}
