import { StyledTabContainer, Tabs, MyTab } from './styled-tab';
import * as React from 'react';

interface Tab {
    id: string;
    content: React.ReactNode;
}

interface Props {
    style?: React.CSSProperties;
    tabs: Tab[];
    currentTab: string;
    children: React.ReactNode;
    onChange: (id: string) => void;
}

const TabContainer = (props: Props) => {
    return(
        <StyledTabContainer>
            <Tabs
                style={{...props.style}}
            >
                {props.tabs.map( tab => (
                    <MyTab 
                        id={tab.id}
                        key={tab.id}
                        show={tab.id === props.currentTab}
                        onClick={() => props.onChange(tab.id)}
                    >
                        {tab.content}
                    </MyTab>
                ))}
            </Tabs>
            {props.children}

        </StyledTabContainer>
    )
}

export default TabContainer;