import React from 'react';
import { Box, Typography, Link, Divider, IconButton } from '@mui/material';
import { GitHub, Twitter, Book } from '@mui/icons-material';
import styled from '@emotion/styled';

const FooterContainer = styled(Box)(({ theme }) => ({
  padding: theme.spacing(4),
  backgroundColor: theme.palette.background.paper,
  marginTop: 'auto',
}));

const Footer = () => {
  return (
    <FooterContainer component="footer">
      <Divider sx={{ mb: 3 }} />
      <Box
        display="flex"
        flexDirection={{ xs: 'column', md: 'row' }}
        justifyContent="space-between"
        alignItems="center"
        gap={2}
      >
        <Box>
          <Typography variant="h6" color="primary" gutterBottom>
            EnlightenQalb
          </Typography>
          <Typography variant="body2" color="textSecondary">
            Exploring the wisdom of Al-Ghazali through modern AI
          </Typography>
        </Box>

        <Box display="flex" gap={2}>
          <IconButton 
            aria-label="GitHub" 
            href="https://github.com/humblebeeintel" 
            target="_blank"
            rel="noopener"
          >
            <GitHub />
          </IconButton>
          <IconButton 
            aria-label="Twitter" 
            href="https://twitter.com/your-handle" 
            target="_blank"
            rel="noopener"
          >
            <Twitter />
          </IconButton>
          <IconButton 
            aria-label="Original Text" 
            href="https://www.goodreads.com/book/show/27167514-the-alchemy-of-happiness" 
            target="_blank"
            rel="noopener"
          >
            <Book />
          </IconButton>
        </Box>

        <Box textAlign={{ xs: 'center', md: 'right' }}>
          <Typography variant="caption" display="block" color="textSecondary">
            © {new Date().getFullYear()} EnlightenQalb
          </Typography>
          <Typography variant="caption" display="block" color="textSecondary">
            <Link href="/privacy" color="inherit">Privacy Policy</Link> | {' '}
            <Link href="/terms" color="inherit">Terms</Link>
          </Typography>
        </Box>
      </Box>
    </FooterContainer>
  );
};

export default Footer;