import React from 'react';
import { ClipboardList, History } from 'lucide-react';
import EneonTabs from './EneonTabs';
import type { EneonTabDefinition, EneonTabVariant } from './types';

export type EneonDatosHistoricoTabId = 'datos' | 'historico';

interface EneonDatosHistoricoTabsProps {
    activeTab: EneonDatosHistoricoTabId;
    onTabChange: (tabId: EneonDatosHistoricoTabId) => void;
    ariaLabel: string;
    variant?: EneonTabVariant;
    datosCount?: number;
    historicoCount?: number;
    panelIdDatos?: string;
    panelIdHistorico?: string;
    className?: string;
}

export default function EneonDatosHistoricoTabs({
    activeTab,
    onTabChange,
    ariaLabel,
    variant = 'default',
    datosCount = 0,
    historicoCount = 0,
    panelIdDatos = 'panel-cups-datos',
    panelIdHistorico = 'panel-cups-historico',
    className = 'mb-2',
}: EneonDatosHistoricoTabsProps): React.ReactElement {
    const tabs: EneonTabDefinition[] = [
        {
            id: 'datos',
            label: 'Datos actuales',
            icon: <ClipboardList size={20} />,
            count: datosCount,
            variant,
            panelId: panelIdDatos,
        },
        {
            id: 'historico',
            label: 'Histórico',
            icon: <History size={20} />,
            count: historicoCount,
            variant,
            panelId: panelIdHistorico,
        },
    ];

    return (
        <EneonTabs
            tabs={tabs}
            activeTabId={activeTab}
            onTabChange={(tabId) => onTabChange(tabId as EneonDatosHistoricoTabId)}
            ariaLabel={ariaLabel}
            className={className}
        />
    );
}