// src/components/ui/IconButtonGroup.jsx
// A compact grouped strip of icon-only action buttons.
// Looks like: [ icon | icon | icon ]
// Each slot is one Button (ghost/secondary) with only an icon and an aria-label.
//
// Props:
//   buttons  — Array<{
//                icon:      ReactNode   — the SVG / element to render
//                label:     string      — aria-label (required for a11y)
//                onClick:   () => void
//                loading?:  boolean
//                disabled?: boolean
//                variant?:  string      — overrides group variant for this slot
//              }>
//   variant  — default variant for all slots: 'ghost' | 'secondary'  (default: 'secondary')
//   size     — 'sm' | 'md' | 'lg'  (default: 'md')
//   disabled — disables all buttons
//   className — extra class on wrapper

import Spinner from '@/components/ui/Spinner'

export default function IconButtonGroup({
  buttons = [],
  variant = 'secondary',
  size = 'md',
  disabled = false,
  className = '',
}) {
  return (
    <div
      className={`icon-btn-group ${className}`}
      role="group"
    >
      {buttons.map((btn, idx) => {
        const isFirst = idx === 0
        const isLast  = idx === buttons.length - 1
        const v = btn.variant ?? variant
        const isDisabled = disabled || btn.disabled || btn.loading

        return (
          <button
            key={idx}
            type="button"
            disabled={isDisabled}
            aria-disabled={isDisabled || undefined}
            aria-busy={btn.loading || undefined}
            aria-label={btn.label}
            title={btn.label}
            onClick={btn.onClick}
            className={[
              'btn',
              `btn-${v}`,
              `btn-${size}`,
              'icon-btn-group__btn',
              isFirst ? 'icon-btn-group__btn--first' : '',
              isLast  ? 'icon-btn-group__btn--last'  : '',
              !isFirst && !isLast ? 'icon-btn-group__btn--mid' : '',
            ].filter(Boolean).join(' ')}
          >
            {btn.loading
              ? <Spinner size={size === 'lg' ? 'md' : 'sm'} />
              : <span className="shrink-0 flex items-center" aria-hidden="true">{btn.icon}</span>
            }
          </button>
        )
      })}
    </div>
  )
}
