import React, { useEffect, useState } from 'react';
import styled from '@emotion/styled';
import { Link } from 'react-router-dom';
import { Stack } from '@mui/material';
import { ToggleTabs } from '@components';

const OuterContainer = styled(Stack)`
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
  padding: 10px 10px 0px 0px;
`;

export const Settings = () => {
  const tabs = [
      {
          label: 'Personal',
          value: 'personal'
      },
      {
          label: 'Organization',
          value: 'org'
      }
  ];

  const [tabValue, setTabValue] = useState(tabs[0]);

  useEffect(() => {
    document.title = 'ShiftSync | Settings';
  }, []);

  return (
    <div>
      <OuterContainer>
        <ToggleTabs 
            tabs={tabs}
            tabValue={tabValue}
            setTabValue={setTabValue}
            tabColor='#4D79FF'
        />
      </OuterContainer>
      <h1>Settings Page</h1>
      <Link to="/">Go to Home</Link>
    </div>
  );
};