import * as React from 'react';
import type { NextPage } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import Box from '@mui/material/Box';

import Layout from 'src/components/Layout';
import HeroSection from 'src/components/HomeSection/HeroSection';
import CardSection from 'src/components/HomeSection/CardSection';

const Home: NextPage = () => {
  // const auth0Meta = useRecoilValue(auth0MetaState);

  return (
    <Layout
      title="Home"
      description="Welcome to the Home page"
      authType="optional"
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          gap: '2.5rem',
          pt: { xs: 0, md: '2.5rem' },
          pb: { xs: 0, md: '2.5rem' },
        }}
      >
        <HeroSection />
        <CardSection />
      </Box>
    </Layout>
  );
};

export async function getStaticProps({ locale }: any) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
      // Will be passed to the page component as props
    },
  };
}

export default Home;