export default function GestionesSidebar({ gestiones, gestionActual, selectedId, onSelect }) {
  const historial = gestiones?.historial || [];
  const actual = gestiones?.gestionActual || gestionActual;

  return (
    <aside className="gestiones-sidebar">
      <h3 className="gestiones-sidebar__title">Gestiones</h3>

      <button
        type="button"
        className={`gestion-item gestion-item--actual${selectedId === 'actual' ? ' gestion-item--active' : ''}`}
        onClick={() => onSelect('actual')}
      >
        <span className="gestion-item__label">Gestión actual</span>
        {actual && (
          <span className="gestion-item__range">
            desde {actual.fechaInicio}
          </span>
        )}
      </button>

      {historial.length > 0 && (
        <>
          <p className="gestiones-sidebar__subtitle">Historial</p>
          <ul className="gestion-list">
            {historial.map((g) => (
              <li key={g.id}>
                <button
                  type="button"
                  className={`gestion-item${String(selectedId) === String(g.id) ? ' gestion-item--active' : ''}`}
                  onClick={() => onSelect(String(g.id))}
                >
                  <span className="gestion-item__label">{g.etiqueta}</span>
                  <span className="gestion-item__range">
                    {g.fechaInicio} → {g.fechaFin}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </>
      )}

      {historial.length === 0 && (
        <p className="gestiones-sidebar__empty">Sin gestiones cerradas aún.</p>
      )}
    </aside>
  );
}