import React from 'react'
import { StyledTab, StyledTabList } from './styled'

const Tab = ({ isAsync, onClick }) => (
  <StyledTabList>
    <StyledTab isActive={isAsync} onClick={() => onClick(true)}>
      Async mode
    </StyledTab>
    <StyledTab
      // @note @example of jss vs styled
      // style={Object.assign({}, style.content, !isAsync ? style.active : null)}
      isActive={isAsync}
      onClick={() => onClick(false)}
    >
      Sync mode
    </StyledTab>
  </StyledTabList>
)
export default Tab