import React from 'react'

import SectionIntro from './SectionIntro'
import Button from './Button'

const PageIntro = ({ ...props }) => (
  <section className="bg-saburly-indigo relative">
    <div className="container mx-auto flex lg:flex-row flex-col flex-col-reverse p-4">
      <div className="text-center lg:text-left lg:mt-4">
        <SectionIntro
          light
          intro={props.intro}
          classes="lg:text-left lg:max-w-xs content-center"
          headline={props.headline}
          text={props.text}
        />
        { props.button && 
        <Button
          text={props.buttonText}
          url={props.url}
          classes={props.buttonClasses}
        />
        }
      </div>
      {props.image && (
        <img
          src={props.image}
          className="lg:-mt-4 md:max-w-md xl:max-w-full z-10"
          alt="Software Development Agency"
        />
      )}
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
      <title>bg-saburly-white</title>
      <path
        d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
        transform="translate(0 0)"
        style={{ fill: '#fff' }}
      />
    </svg>
  </section>
)

export default PageIntro