SearchDialog

import { SearchDialog } from 'boltdocs/primitives'

// docs/components/CustomSearchDialog.tsx
import React from 'react'
import { SearchDialog } from 'boltdocs/primitives'
import { useSearch } from 'boltdocs/client'

export default function CustomSearchDialog() {
  const { isOpen, close, query, setQuery, results } = useSearch()

  return (
    <SearchDialog
      isOpen={isOpen}
      onOpenChange={(open) => !open && close()}
      className="bg-black/40 backdrop-blur-xs flex items-center justify-center p-4 transition-all"
    >
      <SearchDialog.Content className="w-full max-w-xl bg-white dark:bg-zinc-900 border border-subtle rounded-xl shadow-2xl overflow-hidden">
        <SearchDialog.Dialog>
          
          {/* 1. Entrada de Búsqueda Estilizada en el Encabezado */}
          <SearchDialog.Input className="flex items-center border-b border-subtle px-4 py-3">
            <SearchDialog.Input.SearchInput
              value={query}
              onChange={(e) => setQuery((e.target as HTMLInputElement).value)}
              placeholder="Buscar documentación..."
              className="text-sm placeholder-zinc-400 outline-none"
            />
            {query && (
              <SearchDialog.Input.Button className="text-xs text-muted hover:text-body">
                Limpiar
              </SearchDialog.Input.Button>
            )}
          </SearchDialog.Input>

          {/* 2. Caja de Lista de Resultados Desplazable */}
          {results.length > 0 && (
            <SearchDialog.Autocomplete>
              <SearchDialog.List className="p-2 max-h-96 overflow-y-auto space-y-1">
                {results.map((item) => (
                  <SearchDialog.Item
                    key={item.path}
                    id={item.path}
                    className="p-2.5 rounded-lg transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800"
                  >
                    {/* Indicadores visuales para páginas regulares vs. encabezados profundos */}
                    <SearchDialog.Item.Icon
                      isHeading={item.path.includes('#')}
                      className="text-muted mr-3"
                    />
                    
                    <SearchDialog.Item.Title className="text-sm font-medium text-body">
                      {item.title}
                    </SearchDialog.Item.Title>
                    
                    {item.description && (
                      <SearchDialog.Item.Bio className="text-xs text-muted">
                        {item.description}
                      </SearchDialog.Item.Bio>
                    )}
                  </SearchDialog.Item>
                ))}
              </SearchDialog.List>
            </SearchDialog.Autocomplete>
          )}

          {/* Mensaje alternativo vacío */}
          {query && results.length === 0 && (
            <div className="p-8 text-center text-sm text-muted">
              No se encontraron resultados para "{query}"
            </div>
          )}

        </SearchDialog.Dialog>
      </SearchDialog.Content>
    </SearchDialog>
  )
}