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 py-1`}
      >
        {props.intro}
      </h3>
    )}
    {props.headline && (
      <h2
        className={`${props.light ? headlineDark : ''} ${props.h2Classes}
    text-black font-black my-2 py-1`}
      >
        {props.headline}
      </h2>
    )}
    {props.text && (
      <p
        className={`${props.light ? headlineDark : ''} ${
          props.header ? 'saburly-text-intro' : 'text-black-light'
        } font-light font-serif opacity-80 leading-normal md:text-lg ${
          props.textClasses
        }`}
      >
        {props.text}
      </p>
    )}
    {props.children}
  </div>
)

export default IntroDefault
