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

interface TabNavigatorProps {
  activeTab: 'electrico' | 'gas' | 'documentos';
  onTabChange: (tab: 'electrico' | 'gas' | 'documentos') => void;
  electricCount: number;
  gasCount: number;
  documentosCount: number;
}

export const TabNavigator: React.FC<TabNavigatorProps> = ({
  activeTab,
  onTabChange,
  electricCount,
  gasCount,
  documentosCount,
}) => {
  const tabs: EneonTabDefinition[] = [
    {
      id: 'electrico',
      label: 'CUPS Eléctricos',
      icon: <Bolt size={16} />,
      count: electricCount,
      variant: 'electrico',
      panelId: 'panel-cups-electrico',
    },
    {
      id: 'gas',
      label: 'CUPS Gas',
      icon: <Flame size={16} />,
      count: gasCount,
      variant: 'gas',
      panelId: 'panel-cups-gas',
    },
    {
      id: 'documentos',
      label: 'Documentos',
      icon: <Download size={16} />,
      count: documentosCount,
      variant: 'documentos',
      panelId: 'panel-documentos',
    },
  ];

  return (
    <EneonTabs
      tabs={tabs}
      activeTabId={activeTab}
      onTabChange={(tabId) => onTabChange(tabId as TabNavigatorProps['activeTab'])}
      ariaLabel="Pestañas CUPS y documentos"
      className="mb-3"
    />
  );
};