Add Search

"use client"
import { useState, useCallback } from "react"
import dash from "@/lib/dash"

export function SearchBar() {
  const [query, setQuery] = useState("")
  const [results, setResults] = useState([])
  const [loading, setLoading] = useState(false)

  const search = useCallback(async (q: string) => {
    if (q.length < 2) { setResults([]); return }
    setLoading(true)
    const { products } = await dash.products.list({ search: q, limit: 8 })
    setResults(products)
    setLoading(false)
  }, [])

  return (
    <div className="relative">
      <input value={query} onChange={e => { setQuery(e.target.value); search(e.target.value) }}
             placeholder="Search products..." className="w-full p-3 rounded bg-gray-800" />
      {results.length > 0 && (
        <div className="absolute top-full w-full bg-gray-900 border rounded mt-1 max-h-80 overflow-y-auto">
          {results.map(p => (
            <a key={p.id} href={`/products/${p.slug}`} className="flex gap-3 p-3 hover:bg-gray-800">
              <img src={p.main_image} alt="" className="w-12 h-12 rounded" />
              <div>
                <p className="font-medium">{p.name}</p>
                <p className="text-sm text-gray-400">${p.discounted_price || p.price}</p>
              </div>
            </a>
          ))}
        </div>
      )}
    </div>
  )
}