import clsx from 'clsx';
import React from 'react';

import { SkipLink, SkipLinkTarget } from '../../elements/skip-link';
import { SiteFooterNav } from '../navigation/site-footer-nav';
import { SiteHeaderNav } from '../navigation/site-header-nav';
import { SiteFooterNewsletterForm } from '../navigation/site-footer-newsletter-form';
import * as css from './site-layout.module.scss';

export const SiteHeader = () => (
  <header className={clsx(css.siteHeader, 'bd-bottom bd-tone-4 bd-1')}>
    <div className={css.spacer} />
    <div className={css.siteHeaderInner}></div>
    <SiteHeaderNav />
    <div className={css.spacer} />
  </header>
);

export const SiteFooter = () => (
  <footer className={css.siteFooter}>
    <SiteFooterNewsletterForm />
    <SiteFooterNav />
  </footer>
);

export const SiteLayout = ({ children }) => {
  return (
    <div className={css.site}>
      <SkipLink />
      <SiteHeader />
      <SkipLinkTarget />
      <main className={css.siteMain}>{children}</main>
      <SiteFooter />
    </div>
  );
};