import React, { Component } from 'react'
import PropTypes from 'prop-types' //ES6
import styles from './styles.module.css'
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import TypoGraphy from '@mui/material/Typography'
import Link from 'next/link'
import { withStyles } from '@mui/material/styles';
import styled from '@emotion/styled'
import FooterLink from '@/fragments/FooterLink';

// SS - IDK what this is. It feels hacky..
// DS - Because it is hacky, its stupid javascript magic
// const useStyles = theme => ({ //const makes a constant, => defines a function, 
// so it looks like useStyles will end up beign a function that is actually the theme function
// the useStyles function will have properties in root, so useStyles.root
//  root: {
//    width: '75%',
//    maxWidth: 260,
//    /* backgroundColor: theme.palette.background.paper, */
//    float: 'right',
//    marginRight: '2%',
//    fontSize: '.80em'
//  },
// }); 
// }

class FooterLinks extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  render() {
    const { classes } = this.props;
    return (
      <FooterLinksStyled>
        <div className="footer-links">
           <List component="nav" >
              <React.Fragment>
                <FooterLink href="/info/faq" title="FAQ" />
                <FooterLink href="/info/tos" title="Terms Of Service" />
                <FooterLink href="/info/contactus" title="Contact Us" />
                <FooterLink href="/info/privacypolicy" title="Privacy Policy" />
                <FooterLink href="/info/pip" title="Personal Information Policy" />
                <FooterLink href="/info/disclosure" title="Disclosure" />
                <FooterLink href="/info/about" title="About Us" />
              </React.Fragment>
            </List>
        </div>
      </FooterLinksStyled>
    )
  }
}

const FooterLinksStyled = styled.div`
    .footer-links nav {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      width: 100%;
    }
`
// export default withStyles(useStyles)(FooterLinks);

export default FooterLinks;