// Tabs Component
import { ReactNode, useState } from 'react';
import { clsx } from 'clsx';
import './Tabs.css';

interface Tab {
  id: string;
  label: string;
  icon?: ReactNode;
  badge?: number;
}

interface TabsProps {
  tabs: Tab[];
  defaultTab?: string;
  children: (activeTab: string) => ReactNode;
  className?: string;
}

export default function Tabs({ tabs, defaultTab, children, className }: TabsProps) {
  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);

  return (
    <div className={clsx('tabs', className)}>
      <div className="tabs__header">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={clsx('tabs__tab', {
              'tabs__tab--active': activeTab === tab.id,
            })}
            onClick={() => setActiveTab(tab.id)}
          >
            {tab.icon && <span className="tabs__icon">{tab.icon}</span>}
            <span className="tabs__label">{tab.label}</span>
            {tab.badge !== undefined && tab.badge > 0 && (
              <span className="tabs__badge">{tab.badge}</span>
            )}
          </button>
        ))}
      </div>
      <div className="tabs__content">{children(activeTab)}</div>
    </div>
  );
}

