import React from 'react';
import styled from '@emotion/styled';
import { Divider, Stack } from '@mui/material';

const TabShell = styled('div')`
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: flex-end;
  border: 1px solid black;
  border-radius: 6px;
  overflow: hidden;
`;

const Tab = styled(Stack)`
  display: flex;
  align-items: center;
  padding: 2px 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
`;

export const ToggleTabs = ({
  tabs,
  tabValue,
  setTabValue,
  tabColor
}) => {
  return (
    <TabShell>
      {tabs?.map((tab, index) => {
        return (
          <Stack
            key={`${tab?.value}-stack`}
            direction='row'
          >
            <Tab
              key={tab?.value}
              onClick={() => {
                setTabValue(tab)
              }}
              style={{
                backgroundColor: tabValue?.value === tab?.value ? tabColor : 'transparent',
                color: tabValue?.value === tab?.value ? 'white' : 'black'
              }}
            >
              {tab?.label}
            </Tab>
            {index < tabs?.length - 1 && (
              <Divider orientation="vertical" variant="middle" flexItem />
            )}
          </Stack>
        )
      })}
    </TabShell>
  );
};