/**
 * CategoriesTabs – horizontal tabs (e.g. filtered tabs) (primitive)
 *
 * Active tab from context; on select updates context and tracks analytics.
 */
import React from 'react';
import { useSuggestionsContext } from './SuggestionsContext';
import { clsx } from 'clsx';
export function CategoriesTabs({ className, style, tabClassName }) {
    const { filteredTabs, activeTabId, setActiveTab } = useSuggestionsContext();
    if (filteredTabs.length === 0)
        return null;
    return (React.createElement("div", { className: clsx('seekora-suggestions-categories-tabs', className), style: {
            display: 'flex',
            gap: 4,
            padding: '8px 12px',
            borderBottom: '1px solid var(--seekora-border-color, #e5e7eb)',
            overflowX: 'auto',
            ...style,
        }, role: "tablist" }, filteredTabs.map((tab) => {
        const isActive = activeTabId === tab.id;
        return (React.createElement("button", { key: tab.id, type: "button", role: "tab", "aria-selected": isActive, className: clsx('seekora-suggestions-tab', isActive && 'seekora-suggestions-tab--active', tabClassName), style: {
                padding: '8px 12px',
                border: 'none',
                borderRadius: 'var(--seekora-border-radius, 6px)',
                backgroundColor: isActive ? 'var(--seekora-primary-light, rgba(59, 130, 246, 0.1))' : 'transparent',
                color: isActive ? 'var(--seekora-primary, #3b82f6)' : 'inherit',
                cursor: 'pointer',
                fontSize: '0.875rem',
                fontWeight: isActive ? 600 : 400,
                whiteSpace: 'nowrap',
                transition: 'background-color 120ms ease',
            }, onClick: () => setActiveTab(tab) }, tab.label));
    })));
}
