// Generico: el llamador arma `items` como [{ key, breadcrumb: [..partes..], onClick }] — este
// componente solo los pinta como "parte1 - parte2 - parte3", clicables, en un panel flotante bajo
// el buscador. Reutilizado por el buscador global de Proyectos ("Proyecto - Actividad - Tarea") y
// por el buscador de Actividades dentro de un proyecto ("Actividad - Tarea").
export function SearchResultsDropdown({ items, emptyLabel }) {
  return (
    <div className="search-results-dropdown">
      {items.length === 0 ? (
        <div className="search-results-empty">{emptyLabel}</div>
      ) : (
        items.map((item) => (
          <button key={item.key} type="button" className="search-results-item" onClick={item.onClick}>
            {item.breadcrumb.map((part, i) => (
              <span key={i}>
                {i > 0 && <span className="search-results-sep"> — </span>}
                {part}
              </span>
            ))}
          </button>
        ))
      )}
    </div>
  );
}