import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import Item from './Item';
import { Column, Row } from '../Section';

import './main-footer.scss';

const propTypes = {
  /** @ignore */
  className: PropTypes.string,
  /** @ignore  */
  children: PropTypes.array,
  secondary: PropTypes.bool,
  component: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.func
  ]),
  innerComponent: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.func
  ])
};

const defaultProps = {
  className: undefined,
  children: null,
  secondary: false,
  component: 'footer',
  innerComponent: 'ul'
};

const MainFooter = ({
  className, children, secondary, component: Component, innerComponent: InnerComponent, ...props
}) => (
  <Component
    className={className}
    styleName={classNames({ secondary }, 'full-width')}
    {...props}
  >
    <InnerComponent styleName="inner">{children}</InnerComponent>
  </Component>
);

MainFooter.propTypes = propTypes;
MainFooter.defaultProps = defaultProps;

MainFooter.Item = Item;
MainFooter.Column = Column;
MainFooter.Row = Row;

export default MainFooter;
