text: import React from 'react'
  import styled from 'styled-components'
  import useSiteMetadata from '../hooks/use-site-config'
  import useSiteImages from '../hooks/use-site-images'
  
  const HeroContainer = styled.div`
    position: relative;
    display: table;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  `
  
  const TitleContainer = styled.div`
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
  `
  
  const HeroTitle = styled.h1`
    font-family: "Rubik", serif;
    font-weight: 500;
    font-size: 3rem;
    margin: 10px 50px;
    color: var(--color-white);
    text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.85);
  `
  
  const HeroSubTitle = styled.h2`
    font-family: "Rubik", serif;
    margin: 10px 50px;
    color: var(--color-white);
    text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.85);
  `
  
  const Hero = props => {
    const { siteCover } = useSiteMetadata()
    const { fluid } = useSiteImages(siteCover)
    const heroImg = props.heroImg || fluid.src
  
    return (
      <HeroContainer style={{ backgroundImage: `url("${heroImg}")` }}>
        <TitleContainer>
          <HeroTitle>{props.title}</HeroTitle>
          {props.subTitle && <HeroSubTitle>{props.subTitle}</HeroSubTitle>}
        </TitleContainer>
      </HeroContainer>
    )
  }
  
  export default Hero
  