// One axis's collapse control. Rows and columns are the same thing — a depth in
// ViewConfig, counting the levels to show — so they are drawn by one component
// rather than two that happen to look alike.
//
// The buttons are named after the level they reveal. The row axis used to be a
// fixed 0 1 2 3: a number means nothing without already knowing what group_by
// holds, and a fixed range offers levels that do not exist while hiding ones
// that do.
export default function DepthButtons({ label, levels, depth, onPick, totalLabel = 'Total' }) {
  return (
    <div className="flex items-center gap-1.5">
      <span className="pf-section-label">{label}</span>
      {Array.from({ length: levels.length + 1 }, (_, n) => (
        <button key={n} onClick={() => onPick(n)}
          title={n === 0
            ? `Collapse ${label.toLowerCase()} to a single total`
            : `Show ${label.toLowerCase()} down to ${levels.slice(0, n).join(' › ')}`}
          className={`border rounded px-1.5 py-0.5 transition-colors max-w-[9rem] truncate
            ${depth === n ? 'border-blue-300 text-blue-600 bg-blue-50'
                          : 'border-gray-200 text-gray-500 hover:border-gray-400'}`}>
          {n === 0 ? totalLabel : levels[n - 1]}
        </button>
      ))}
    </div>
  )
}