cidwa-components/src/components/tabs.tsx

import React, { useState, JSX } from 'react';

interface Tab {
  id: string;
  title: string | JSX.Element;
  titleText?: string;
  content: JSX.Element;
  disabled?: boolean;
}
interface TabsProps {
  tabs: Tab[];
  style?: 'default' | 'box';
  className?: {
    container?: string;
    tab?: string;
    content?: string;
  };
  defaultActiveTab?: string;
}

export default function Tabs({
  tabs,
  style = 'default',
  className,
  defaultActiveTab,
}: TabsProps) {
  const [activeTab, setActiveTab] = useState<string>(() => {
    // 1) si se pasó defaultActiveTab y existe en tabs (y no está disabled), úsala
    if (defaultActiveTab) {
      const found = tabs.find((t) => t.id === defaultActiveTab && !t.disabled);
      if (found) return found.id;
    }
    // 2) si no, buscar el primer tab habilitado
    const firstEnabled = tabs.find((t) => !t.disabled);
    return firstEnabled ? firstEnabled.id : tabs[0]?.id || '';
  });

  return (
    <>
      <ul className={`nav nav-tabs style-${style}`} id='myTab' role='tablist'>
        {tabs.map((tab) => (
          <li
            key={tab.id}
            className='nav-item'
            role='presentation'
            title={
              typeof tab.title === 'string' ? tab.title : tab.titleText || ''
            }
          >
            <button
              className={`nav-link ${tab.disabled ? 'disabled' : ''} ${
                activeTab === tab.id ? 'active' : ''
              }`}
              id={`tab-${tab.id}`}
              data-bs-toggle='tab'
              data-bs-target={`#tab-pane-${tab.id}`}
              type='button'
              role='tab'
              aria-controls={`tab-pane-${tab.id}`}
              aria-selected={activeTab === tab.id}
              onClick={() => !tab.disabled && setActiveTab(tab.id)}
            >
              {tab.title.toString().length > 35
                ? `${tab.title.toString().slice(0, 35)}...`
                : tab.title}
            </button>
          </li>
        ))}
      </ul>
      <div className='tab-content mt-3' id='myTabContent'>
        {tabs.map((tab) => (
          <div
            key={tab.id}
            className={`tab-pane fade ${
              activeTab === tab.id ? 'show active' : ''
            } ${className?.content}`}
            id={`tab-pane-${tab.id}`}
            role='tabpanel'
            aria-labelledby={`tab-${tab.id}`}
          >
            {activeTab === tab.id && tab.content}
          </div>
        ))}
      </div>
    </>
  );
}