import { Box, Divider, Grid, Stack, Typography } from '@mui/material'
import { useCustomTheme } from '@/themes/useCustomTheme'
import Link from 'next/link';
import { NavItems } from '@/data/navigation-items';
import Image from 'next/image';

const Footer = () => {
  const theme = useCustomTheme();
  return (
    <Box
      sx={{
        backgroundColor: theme.customProperties.primaryPink,
        mt: '50px',
        minHeight: '50vh'
      }}
    >
      <Box
      sx={{
        maxWidth: '1200px',
        mx: 'auto',
        px: '1rem',
        pt: '65px'
      }}
      >
        <Grid container>
          <Grid item xs={12} md={9} sx={{px: '15px'}}>
            <Box display={'flex'}>
              <Image src={'/logo.png'} width={150} height={150} alt={'Super Fit Logo'} style={{ filter: 'saturate(0)', opacity: '0.5', marginRight: '15px'}} />
              <Box>
                <Typography variant='h2' sx={{opacity: '0.5'}}>Super Fit</Typography>
                <Typography sx={{opacity: '0.5'}}>Start your fitness journey today, look and feel better tomorrow</Typography>
              </Box>
            </Box>
          </Grid>
          <Grid item xs={12} md={3} sx={{px: '15px'}}>
            <Stack direction={'column'} spacing={1} mb={'25px'}>
              <Typography variant='subtitle1'>
                Site Links
              </Typography>
              {NavItems.map((item, index) => (
                <Link href={item.href} key={index}>
                  <Typography sx={{fontSize: '13px', opacity: '0.5', mb: 0}}>
                    {item.title}
                  </Typography>
                </Link>
              ))}
            </Stack>
          </Grid>
        </Grid>
        <Divider />
        <Box
          sx={{
            py: '20px'
          }}
        >
          <Typography
            sx={{
              opacity: '0.5',
              fontSize: '13px'
            }}
          >
            Copyright &copy; 2023 - {new Date().getFullYear()} Super Fit. All rights reserved.
          </Typography>
        </Box>
      </Box>
    </Box>
  )
}

export default Footer