import React from 'react';
import { Box, Container, Grid, Typography, Link, IconButton } from '@mui/material';
import FacebookIcon from '@mui/icons-material/Facebook';
import TwitterIcon from '@mui/icons-material/Twitter';
import InstagramIcon from '@mui/icons-material/Instagram';
import { Link as RouterLink } from 'react-router-dom';
import imageUtils from '@utils/imageUtils';

const Footer = ({brandingSettings}) => {
  
  const siteName = brandingSettings?.site_name || 'Rocks, Bones & Sticks';
  const copyrightText = brandingSettings?.copyright_text || 
    `© ${new Date().getFullYear()} ${siteName}. All rights reserved.`;
  const logoUrl = imageUtils.getImageUrl(brandingSettings?.logo_url)
  
  return (
    <Box
      component="footer"
      sx={{
        py: 3,
        px: 2,
        mt: 'auto',
        backgroundColor: (theme) =>
          theme.palette.mode === 'light'
            ? theme.palette.grey[200]
            : theme.palette.grey[800],
      }}
    >
      <Container maxWidth="lg">
        <Grid container spacing={3}>
          <Grid item xs={12} sm={4}>
            {logoUrl ? (
              <Box 
                component="img" 
                src={logoUrl} 
                alt={siteName}
                sx={{ 
                  height: 40, 
                  maxWidth: '100%',
                  mb: 2,
                  objectFit: 'contain'
                }} 
              />
            ) : (
              <Typography variant="h6" color="text.primary" gutterBottom>
                {siteName}
              </Typography>
            )}

            <Typography variant="body2" color="text.secondary">
              { brandingSettings?.site_description || `Your premier source for natural curiosities
              and unique specimens from around the world.`}
            </Typography>
          </Grid>
          
          <Grid item xs={12} sm={4}>
            <Typography variant="h6" color="text.primary" gutterBottom>
              {brandingSettings?.site_quicklinks_title || `Quick Links`}
            </Typography>
            <Link component={RouterLink} to="/" color="inherit" display="block">
              Home
            </Link>
            <Link component={RouterLink} to="/products" color="inherit" display="block">
              Shop All
            </Link>
            <Link component={RouterLink} to="/blog" color="inherit" display="block">
              Blog
            </Link>
          </Grid>
          
          <Grid item xs={12} sm={4}>
            <Typography variant="h6" color="text.primary" gutterBottom>
              {brandingSettings?.site_connect || `Connect With Us`}
            </Typography>
            <Box>
              <IconButton aria-label="facebook" color="primary">
                <FacebookIcon />
              </IconButton>
              <IconButton aria-label="twitter" color="primary">
                <TwitterIcon />
              </IconButton>
              <IconButton aria-label="instagram" color="primary">
                <InstagramIcon />
              </IconButton>
            </Box>
            <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
              {brandingSettings?.site_main_newsletter_desc || `Subscribe to our newsletter for updates on new items and promotions.`}
            </Typography>
          </Grid>
        </Grid>
        
        <Box mt={3}>
          <Typography variant="body2" color="text.secondary" align="center">
            {copyrightText}
          </Typography>
        </Box>
      </Container>
    </Box>
  );
};

export default Footer;