import { jsx as _jsx } from "react/jsx-runtime";
import { useTheme } from '../theme';
/**
 * Renders an accessible, keyboard-friendly set of tabs with consistent styling.
 * The component exposes a small API surface while remaining flexible through generics
 * so it can be reused across different tab collections in the playground.
 */
export const TabGroup = ({ tabs, activeTab, onTabChange, variant = 'pill', className, tabClassName, ariaLabel }) => {
    const theme = useTheme();
    const containerClasses = [theme.tabs.container[variant], className].filter(Boolean).join(' ').trim();
    return (_jsx("nav", { className: containerClasses, role: 'tablist', "aria-label": ariaLabel, "aria-orientation": 'horizontal', children: tabs.map((tab) => {
            const isActive = tab.id === activeTab;
            const buttonClasses = [
                theme.tabs.buttonBase[variant],
                theme.tabs.focus,
                isActive ? theme.tabs.buttonActive[variant] : theme.tabs.buttonInactive[variant],
                tab.disabled ? 'cursor-not-allowed opacity-50' : '',
                tabClassName
            ]
                .filter(Boolean)
                .join(' ');
            const tabId = `tab-${tab.id}`;
            const tabPanelId = `tabpanel-${tab.id}`;
            return (_jsx("button", { id: tabId, type: 'button', role: 'tab', "aria-selected": isActive, "aria-controls": tabPanelId, "aria-disabled": tab.disabled || undefined, disabled: tab.disabled, onClick: () => {
                    if (!tab.disabled) {
                        onTabChange(tab.id);
                    }
                }, className: buttonClasses, children: tab.label }, tab.id));
        }) }));
};
export default TabGroup;
