import React from 'react';
import { FileText, Activity } from 'lucide-react';
import { EneonTabs } from '../../../Shared/Tabs';

export type SipsPanelTabId = 'datos-suministros' | 'consumo';

interface Props {
    activeTab: SipsPanelTabId;
    onTabChange: (tabId: SipsPanelTabId) => void;
}

const SipsPanelTabs: React.FC<Props> = ({ activeTab, onTabChange }) => (
    <EneonTabs
        ariaLabel="Secciones de consulta SIPS"
        activeTabId={activeTab}
        onTabChange={(tabId) => onTabChange(tabId as SipsPanelTabId)}
        className="mb-3"
        tabs={[
            {
                id: 'datos-suministros',
                label: 'Datos Suministros',
                icon: <FileText size={16} />,
                panelId: 'sips-panel-datos-suministros',
            },
            {
                id: 'consumo',
                label: 'Consumo',
                icon: <Activity size={16} />,
                panelId: 'sips-panel-consumo',
            },
        ]}
    />
);

export default SipsPanelTabs;