import React from 'react';
import { Box } from '../Box';
import { Flex } from '../Flex';
import TabItem, { TabItemProps } from './TabItem';

export interface TabBarProps {
  tabs: TabItemProps[];
}

const TabBar = ({ tabs }: TabBarProps) => {
  return (
    <Box>
      <Flex
        flexDirection="row"
        flex={1}
        justifyContent="flex-start"
        alignItems="flex-end"
      >
        {tabs.map((t) => (
          <TabItem key={t.id} {...t} />
        ))}
      </Flex>
    </Box>
  );
};

export default TabBar;
