import * as React from 'react';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';

import Header from 'src/components/Layout/Header';
import SEO from 'src/components/Layout/Seo';
import CustomBreadcrumbs from 'src/components/Breadcrumbs';

interface LayoutProps {
  children: React.ReactNode;
  title: string;
  description: string;
  breadcrumbs?: { id: string; path?: string; label: string }[];
  noIndex?: boolean;
  authType?: 'forced' | 'optional' | 'disabled';
  RightSide?: React.ReactNode;
}

export default function Layout(props: LayoutProps) {
  const {
    children,
    title,
    description,
    breadcrumbs,
    noIndex,
    authType,
    RightSide,
  } = props;
  return (
    <>
      <Header authType={authType} />
      <SEO title={title} description={description} noIndex={noIndex} />
      <Box
        sx={{
          width: '100%',
          height: '100%',
          minHeight: 'calc(100vh - 4rem)',
          mt: '4rem',
          backgroundColor: 'background.default',
        }}
      >
        <Container maxWidth="xl">
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            {breadcrumbs && <CustomBreadcrumbs items={breadcrumbs} />}
            {RightSide}
          </Box>
          {children}
        </Container>
      </Box>
    </>
  );
}