import Link from 'next/link';
import { string, element } from 'prop-types';

const Section = ({ title, href, children }) => (
  <section className="section">
    <h1>
      {
        href && (
          <Link href={ href }>
            <a title={ title }>{ title }</a>
          </Link>
        )
      }
      {
        !href && title
      }
    </h1>
    { children }

    <style jsx global>{`
      .section {
        margin: 15px auto;
      }
      .section h1 {
        margin-bottom: 15px;
      }
      .section h1,
      .section h1 a {
        font-size: 26px;
      }
    `}</style>
  </section>
);

Section.propTypes = {
  title: string,
  href: string,
  children: element.isRequired
};

export default Section;