import * as React from 'react';

function Tabs({tabs, activeTabIndex = 0, setActiveTabIndex = () => {}}) {
    const [activeIndex, setActiveIndex] = React.useState(activeTabIndex);

    const setActiveTab = (e) => {
        setActiveIndex(e);
        setActiveTabIndex(e);
    }
    return <nav className="tabs">
        {tabs.map((tab, i) => <div
            key={i+tab.title}
            className={`tabs__item ${i === activeIndex ? "tabs__item--active" : null}`}
            onClick={() => setActiveTab(i)}>{tab.title}</div>)}
    </nav>;
}

export default Tabs;
