import React from 'react';
import PropTypes from 'prop-types';
import { Container } from '../container/Container';
import { usePageContext } from './Page';

const propTypes = {
  children: PropTypes.node,
  tag: PropTypes.elementType,
};

const defaultProps = {
  children: '',
  tag: 'div',
};

export const PageFooter = ({ children, tag: Tag }) => {
  const { size, gutterHorizontal } = usePageContext();

  return (
    <Tag className="sui-l-app-layout__page-footer">
      <Container size={size} gutterHorizontal={gutterHorizontal}>
        {children}
      </Container>
    </Tag>
  );
};

PageFooter.propTypes = propTypes;
PageFooter.defaultProps = defaultProps;
