'use client'

import { Search, X } from 'lucide-react'
import { useSearch } from '@/hooks'

interface SearchBarProps {
  onSearch: (query: string) => void
  placeholder?: string
  debounceMs?: number
  initialValue?: string
}

export default function SearchBar({ 
  onSearch, 
  placeholder = 'Search tasks...', 
  debounceMs = 300,
  initialValue = ''
}: SearchBarProps) {
  const { query, setQuery, clearSearch, isDebouncing } = useSearch({
    debounceMs,
    onSearch
  })

  return (
    <div className="relative">
      <div className="relative">
        <Search 
          className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" 
          size={20} 
        />
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={placeholder}
          className="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
        {query && (
          <button
            onClick={clearSearch}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
            aria-label="Clear search"
          >
            <X size={20} />
          </button>
        )}
        {isDebouncing && (
          <div className="absolute right-10 top-1/2 -translate-y-1/2">
            <div className="w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" />
          </div>
        )}
      </div>
    </div>
  )
}