import React, {FC} from "react";
import {Nav} from "react-bootstrap";
import {Link} from "react-router-dom";

const NavTab: FC<NavTabProps> = ({eventKey, label, icon, activeIcon, activeKey, onTabClick}) => {
    const isActive = () => activeKey === eventKey;

    return (
        <Nav.Link as={Link} eventKey={eventKey} to={'/' + eventKey} onClick={() => onTabClick(eventKey)}>
            {!isActive() || activeIcon == null ?
                <i className={'bi bi-' + icon}></i> :
                <i className={'bi bi-' + activeIcon}></i>}
            <span>{label}</span>
        </Nav.Link>
    );
};

interface NavTabProps {
    eventKey: string,
    label: string,
    icon: string,
    activeIcon?: string,
    activeKey: string,
    onTabClick: (key: string) => void
}

export default NavTab;