import * as React from "react"
import { cn } from "../core/cn"
import { Search, X } from "lucide-react"

interface SearchBarProps {
  /** Called with the debounced search query */
  onSearch: (query: string) => void
  /** Placeholder text */
  placeholder?: string
  /** Debounce delay in ms (default 300) */
  debounceMs?: number
  /** Additional CSS classes for the outer wrapper */
  className?: string
}

function SearchBar({
  onSearch,
  placeholder = "Search...",
  debounceMs = 300,
  className,
}: SearchBarProps) {
  const [query, setQuery] = React.useState("")
  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
  const onSearchRef = React.useRef(onSearch)
  onSearchRef.current = onSearch

  React.useEffect(() => {
    if (timerRef.current) clearTimeout(timerRef.current)
    timerRef.current = setTimeout(() => {
      onSearchRef.current(query)
    }, debounceMs)
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current)
    }
  }, [query, debounceMs])

  return (
    <div
      className={cn(
        "flex flex-1 items-center gap-2 rounded border border-border bg-input px-2 py-1",
        className,
      )}
    >
      <Search size={14} className="text-muted-foreground shrink-0" />
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder={placeholder}
        className="flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
      />
      {query && (
        <button
          onClick={() => setQuery("")}
          className="p-0.5 text-muted-foreground hover:text-foreground"
          aria-label="Clear search"
        >
          <X size={12} />
        </button>
      )}
    </div>
  )
}

export { SearchBar }
export type { SearchBarProps }