import { useState } from 'react'
import { Search } from 'lucide-react'

export default function Busca() {
  const [query, setQuery] = useState('')
  
  return (
    <div className="space-y-6">
      <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Busca</h1>
      
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" size={20} />
          <input
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Buscar databooks, documentos, certificados..."
            className="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 text-lg"
          />
        </div>
        
        <div className="mt-8 text-center text-gray-500 dark:text-gray-400">
          {query ? (
            <p>Buscando por "{query}"...</p>
          ) : (
            <p>Digite algo para buscar</p>
          )}
        </div>
      </div>
    </div>
  )
}
