import { NavigationContext } from '@/context/navigation';
import { useContext } from 'react';
import styled from 'styled-components';

const Container = styled.div`
  background-color: white;
  bottom: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: 40px;
  justify-content: space-around;
  position: fixed;
  width: 100%;
`;

const TabButton = styled.button`
  background: rgba(240, 240, 240);
  border-radius: 6px;
  border: none;
  cursor: pointer;
  height: 100%;
  width: 100%;
`;

export function NavigationBar() {
  const { setCurrentTab, tabsList } = useContext(NavigationContext);

  return (
    <Container>
      {tabsList.map(({ key, title }) => (
        <TabButton key={key} onClick={() => setCurrentTab(key)}>
          {title}
        </TabButton>
      ))}
    </Container>
  );
}

function Tab({ children, visible }) {
  if (!visible) return null;

  return children;
}

export function Tabs({ tabs }) {
  const { currentTab } = useContext(NavigationContext);

  return tabs.map(({ Component, key }) => (
    <Tab key={key} visible={key === currentTab}>
      <Component />
    </Tab>
  ));
}