import React from 'react';
import { Zap, Flame } from 'lucide-react';
import { EneonTabs } from '../../../Shared/Tabs';
import type { EneonTabDefinition } from '../../../Shared/Tabs';

interface TabNavigatorProps {
    activeTab: string;
    onTabChange: (tabId: string) => void;
    electricoCount: number;
    gasCount: number;
}

const TabNavigator: React.FC<TabNavigatorProps> = ({
    activeTab,
    onTabChange,
    electricoCount,
    gasCount,
}) => {
    const tabs: EneonTabDefinition[] = [
        {
            id: 'electricoTab',
            label: 'CUPS Eléctricos',
            icon: <Zap size={20} />,
            count: electricoCount,
            variant: 'electrico',
            panelId: 'panel-cups-electrico',
        },
        {
            id: 'gasTab',
            label: 'CUPS Gas',
            icon: <Flame size={20} />,
            count: gasCount,
            variant: 'gas',
            panelId: 'panel-cups-gas',
        },
    ];

    return (
        <EneonTabs
            tabs={tabs}
            activeTabId={activeTab}
            onTabChange={onTabChange}
            ariaLabel="Pestañas CUPS eléctricos y gas"
            cardHeader
        />
    );
};

export default TabNavigator;