import React from 'react'
import { Link } from 'gatsby'

import { Hero, HeroHeading, HeroDesc } from './style'
import { BottomSectionArrow, OutlineButton } from '../shared/styledComponents'
import { Container } from '../shared'

import { pathPrefix } from '../../../gatsby-config'

import type { HeroSectionProps } from '../../types'

const HeroSection: React.FC<HeroSectionProps> = ({
  location,
  heading,
  desc
}) => (
  <Hero bg={location.pathname === pathPrefix + '/'}>
    <Container>
      <HeroHeading>{heading}</HeroHeading>
      <HeroDesc>{desc}</HeroDesc>
      {location.pathname === pathPrefix + '/' && (
        <Link to="/contact/">
          <OutlineButton>Try Data Controller</OutlineButton>
        </Link>
      )}
    </Container>
    <BottomSectionArrow />
  </Hero>
)

export default HeroSection