import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Icon from '../../visuals/Icon';
import FacebookIcon from '../../visuals/Icon/svg/d_facebook.svg';
import TwitterIcon from '../../visuals/Icon/svg/d_twitter.svg';
import DoodleLogo from '../../visuals/DoodleLogo';

import Link from '../../controls/Link/Link';

class Footer extends Component {
  static propTypes = {
    /** the content of the footer */
    children: PropTypes.node,
    className: PropTypes.string,
    links: PropTypes.array,
    hideSocialLinks: PropTypes.bool,
    right: PropTypes.node,
  };
  static defaultProps = {
    children: null,
    className: null,
    hideSocialLinks: false,
    links: [],
    right: null,
  };

  render() {
    const { children, className, hideSocialLinks, links, right } = this.props;
    const componentClassName = `Footer${className ? ` ${className}` : ''}`;

    return (
      <footer className={componentClassName}>
        {children}
        <aside className="Footer-bar">
          <nav className="Footer-section Footer-section--left">
            {links.map(({ label, to, key }) => (
              <Link key={key || label} to={to} variant="white">
                {label}
              </Link>
            ))}
          </nav>
          <section className="Footer-section Footer-section--center" aria-hidden="true">
            <DoodleLogo />
          </section>
          <section className="Footer-section Footer-section--right">
            {right}
            {!hideSocialLinks && (
              <div className="Footer-links">
                <Link to="https://facebook.com/DoodleAG" title="Facebook" variant="white">
                  <Icon icon={FacebookIcon} />
                </Link>
                <Link to="https://twitter.com/doodletweet" title="Twitter" variant="white">
                  <Icon icon={TwitterIcon} />
                </Link>
              </div>
            )}
          </section>
        </aside>
      </footer>
    );
  }
}

export default Footer;