import React from 'react';
import { Nav, Badge } from 'react-bootstrap';
import { Zap, Flame } from 'lucide-react';

export type TabType = 'electrico' | 'gas';

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

export const TabNavigator: React.FC<TabNavigatorProps> = ({
    activeTab,
    onTabChange,
    electricoCount,
    gasCount
}) => {
    return (
        <Nav variant="tabs" className="mb-3">
            <Nav.Item>
                <Nav.Link
                    active={activeTab === 'electrico'}
                    onClick={() => onTabChange('electrico')}
                    style={{ cursor: 'pointer' }}
                >
                    <Zap size={16} className="me-2" style={{ display: 'inline' }} />
                    CUPS Eléctricos
                    {electricoCount > 0 && (
                        <Badge bg="primary" className="ms-2">
                            {electricoCount}
                        </Badge>
                    )}
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link
                    active={activeTab === 'gas'}
                    onClick={() => onTabChange('gas')}
                    style={{ cursor: 'pointer' }}
                >
                    <Flame size={16} className="me-2" style={{ display: 'inline' }} />
                    CUPS Gas
                    {gasCount > 0 && (
                        <Badge bg="warning" className="ms-2">
                            {gasCount}
                        </Badge>
                    )}
                </Nav.Link>
            </Nav.Item>
        </Nav>
    );
};