/*
 * @Author       : Eleanor Mao
 * @Date         : 2024-04-09 09:27:12
 * @LastEditTime : 2024-04-09 09:27:12
 *
 *
 */
import React from "react";
import { Link, Outlet } from "react-router-dom";
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Toolbar from '@mui/material/Toolbar';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import AccountCircle from '@mui/icons-material/AccountCircle';
import { styled } from '@mui/material/styles';
import { RCIcon } from './RCIcon';

const Layout = styled(Box)(({ theme }) => (
  {
    flex: 'auto',
    display: 'flex',
    minHeight: 0,
    height: '100vh',
    flexDirection: 'column',
    boxSizing: 'border-box',
    background: theme.palette.background.default
  }
));


const Content = styled(Box)(({ theme }) => ({
  minHeight: 0,
  flex: 'auto',
}));
export const Home = () => {
  return (
    <Layout>
      <AppBar position="static" enableColorOnDark sx={{ bgcolor: '#3f51b5' }}>
        <Toolbar>
          <Typography
            variant="h6"
            noWrap
            component={Link}
            to="/"
            style={{ cursor: 'point' }}
            sx={{ flexGrow: 1, display: { xs: 'block' }, color: 'white', }}
          >
            <RCIcon style={{ marginRight: 4, verticalAlign: 'middle' }}/>
            RingCentral AI Workflow Hub
          </Typography>
          <Box sx={{ display: { xs: 'block' }, color: 'white' }}>
            <IconButton
              size="large"
              edge="end"
              aria-label="account of current user"
              aria-haspopup="true"
              color="inherit"
            >
              <AccountCircle/>
            </IconButton>
          </Box>
        </Toolbar>
      </AppBar>
      <Content sx={{ m: 4, }}>
        <Paper elevation={0} sx={{ background: 'none' }}>
          <Outlet/>
        </Paper>
      </Content>
    </Layout>
  );
};


// style={{
//   padding: 24,
//   minHeight: `calc(100vh - 170px)`,
//   background: theme.palette.background.paper,
//   borderRadius: theme.shape.borderRadius,
// }}