'use client'

import { useState, type ReactNode } from 'react'

export type ArmoryTab = { key: string; label: string; icon?: string; count?: number; content: ReactNode }

/**
 * Pestañas de la ficha de armería (Equipación / Talentos / Logros / …). Cada pestaña
 * se renderiza en el servidor y se pasa como contenido; aquí solo se conmuta cuál se
 * muestra. Se mantienen todas montadas (hidden) para no reinicializar el visor 3D.
 */
export function ArmoryTabs({ tabs }: { tabs: ArmoryTab[] }) {
  const [active, setActive] = useState(tabs[0]?.key)

  return (
    <div className="armory-ctabs">
      <div className="armory-ctabbar">
        {tabs.map((tb) => (
          <button
            key={tb.key}
            type="button"
            className={`armory-ctab${tb.key === active ? ' active' : ''}`}
            onClick={() => setActive(tb.key)}
          >
            {tb.icon ? <i className={tb.icon} /> : null}
            <span>{tb.label}</span>
            {typeof tb.count === 'number' ? <span className="armory-ctab-count">{tb.count}</span> : null}
          </button>
        ))}
      </div>
      {tabs.map((tb) => (
        <div key={tb.key} className="armory-ctab-panel" hidden={tb.key !== active}>
          {tb.content}
        </div>
      ))}
    </div>
  )
}