/* Viral Voice — pestaña unificada: agrupa Generar Voz, Mis Voces, Clonar Voz e Historial */

const VIRAL_VOICE_SUBTABS = [
  { id: "gen_voice",     label: "Generar Voz", Icon: IconWave  },
  { id: "mis_voces",     label: "Mis Voces",   Icon: IconUser  },
  { id: "clonar_voz",    label: "Clonar Voz",  Icon: IconCopy  },
  { id: "voice_history", label: "Historial",   Icon: IconClock },
];

const VIRAL_VOICE_IDS = VIRAL_VOICE_SUBTABS.map((s) => s.id);

function ViralVoiceTab({ tab, onNavigate, currentUser }) {
  const active = VIRAL_VOICE_IDS.includes(tab) ? tab : "mis_voces";

  function go(id) {
    if (onNavigate) onNavigate(id);
  }

  return (
    <div className="col" style={{ gap: 16 }}>
      <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
        {VIRAL_VOICE_SUBTABS.map(({ id, label, Icon }) => (
          <button
            key={id}
            className={"btn " + (active === id ? "btn-primary" : "btn-ghost")}
            style={{ fontSize: 13, height: 34, padding: "0 14px", gap: 6 }}
            onClick={() => go(id)}
          >
            <Icon size={14} /> {label}
          </button>
        ))}
      </div>

      {active === "gen_voice"     && <GenVozTab onNavigate={go} />}
      {active === "mis_voces"     && <MisVocesTab currentUser={currentUser} onNavigate={go} />}
      {active === "clonar_voz"    && <ClonarVozTab />}
      {active === "voice_history" && <VoiceHistoryTab />}
    </div>
  );
}

Object.assign(window, { ViralVoiceTab, VIRAL_VOICE_IDS });