import React from 'react';
import {
  AppBar,
  Toolbar,
  Tabs,
  Tab
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

interface PropTypes {
  page: string;
  setPage: (newPage: string) => void;
}

const useStyles = makeStyles(theme => ({
  tab: {
    '& .MuiTab-wrapper': {
      padding: theme.spacing(2),
      flexDirection: 'row',
      fontSize: '0.8125rem'
    }
  }
}));

const tabs = ['Profile', 'Feed'];

const Header: React.FC<PropTypes> = ({ page /* , setPage */ }) => {
  const classes = useStyles();

  const handleChange = () => {};

  return (
    <AppBar position="static">
      <Toolbar>
        <Tabs onChange={handleChange} value={page}>
          {tabs.map((tab: string) => (
            <Tab
              label={tab}
              key={tab}
              className={classes.tab}
            />
          ))}
        </Tabs>
      </Toolbar>
    </AppBar>
  );
};

export default Header;