text: // @flow strict
  import React from 'react';
  import Helmet from 'react-helmet';
  import { withPrefix } from 'gatsby';
  import type { Node as ReactNode } from 'react';
  import { useSiteMetadata } from '../../hooks';
  import styles from './Layout.module.scss';
  
  type Props = {
    children: ReactNode,
    title: string,
    description?: string,
    socialImage?: string,
  };
  
  const Layout = ({ children, title, description, socialImage }: Props) => {
    const { author, url } = useSiteMetadata();
    const metaImage = socialImage != null ? socialImage : author.photo;
    const metaImageUrl = url + withPrefix(metaImage);
  
    return (
      <div className={styles.layout}>
        <Helmet>
          <html lang="en" />
          <title>{title}</title>
          <meta name="description" content={description} />
          <meta property="og:site_name" content={title} />
          <meta property="og:image" content={metaImageUrl} />
          <meta name="twitter:card" content="summary" />
          <meta name="twitter:title" content={title} />
          <meta name="twitter:description" content={description} />
          <meta name="twitter:image" content={metaImageUrl} />
        </Helmet>
  
        {/* Header with repeating background */}
        <header
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            height: '50px',
            backgroundImage:
              'url(https://raw.githubusercontent.com/mocon/oconnor-blog/master/static/book-of-durrow-repeat.jpg)',
            backgroundSize: '393px 50px',
            opacity: 0.9,
            borderTop: '1px solid rgba(0,0,0,0.5)',
            borderBottom: '2px solid rgba(0,0,0,0.4)',
          }}
        />
  
        {children}
      </div>
    );
  };
  
  export default Layout;
  