import React from 'react'
import Link from 'gatsby-link'

let headlineDark = 'text-white'
let headlineLight = 'text-indigo'

const IntroDefault = ({ ...props }) => (
  <div className={`${props.classes}`}>
    {props.intro && (
      <h3
        className={`
      ${
        props.light ? headlineDark : headlineLight
      } opacity-50 text-sm font-light uppercase pt-2 pb-1`}
      >
        {props.intro}
      </h3>
    )}
    {props.headline && (
      <h1
        className={`${props.light ? headlineDark : ''}
     font-light pt-1 pb-2`}
      >
        {props.headline}
      </h1>
    )}
    {props.text && (
      <p
        className={`${props.light ? headlineDark : ''} 
    font-light leading-normal opacity-70`}
      >
        {props.text}
      </p>
    )}
  </div>
)

export default IntroDefault