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";
  import favicon from "../images/favicon.ico";
  
  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
          link={[
            {
              rel: "icon",
              type: "image/png",
              sizes: "16x16",
              href: `${favicon}`,
            },
            {
              rel: "icon",
              type: "image/png",
              sizes: "32x32",
              href: `${favicon}`,
            },
            { rel: "shortcut icon", type: "image/png", href: `${favicon}` },
          ]}
        >
          <html lang="en" />
          <title>{title}</title>
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Exo:wght@500&display=swap"
            rel="stylesheet"
          />
          <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>
        {children}
      </div>
    );
  };
  
  export default Layout;
  