import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Image from 'next/image';
const pages = ['Home', 'Menu', 'About', 'Store', 'Contact'];

const Footer = () => {
  return (
    <Box
      sx={{
        display: 'flex',
        width: '100%',
        height: 220,
        flexDirection: 'column',
        bottom: 0,
        position: 'relative',
      }}
    >
      <Typography
        variant="h3"
        sx={{
          width: '100%',
          textAlign: 'center',
          color: 'primary.main',
          height: 60,
          mt: 4,
        }}
      >
        Coffee Shop
      </Typography>
      <Box
        sx={{
          maxWidth: '100%',
          height: 30,
          mt: 1.5,
          display: 'flex',
          justifyContent: 'center',
        }}
      >
        {pages.map((page) => (
          <Typography
            key={page}
            sx={{
              fontSize: 20,
              fontWeight: 500,
              px: 1.5,
              color: 'primary.main',
            }}
          >
            {page}
          </Typography>
        ))}
      </Box>
      <Box
        sx={{
          display: 'flex',
          width: '100%',
          height: 40,
          mt: 4,
          justifyContent: 'center',
        }}
      >
        <Box sx={{ px: 2 }}>
          <Image
            src="/images/Instagram.svg"
            alt="cart"
            width={35}
            height={35}
          />
        </Box>
        <Box sx={{ px: 2 }}>
          <Image src="/images/Facebook.svg" alt="cart" width={35} height={35} />
        </Box>
        <Box sx={{ px: 2 }}>
          <Image src="/images/Twitter.svg" alt="cart" width={35} height={35} />
        </Box>
      </Box>
    </Box>
  );
};

export default Footer;