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

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

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

export default IntroDefault