import React from 'react'
import Image from 'next/image'
type PageProps = {
    title : string,
    subtitle : string,
    content : string,
    icon? : string
}

const PageHero : React.FC<PageProps> = ({title, subtitle, content, icon}) => {
  return (
    <div className='py-20 bg-neutral-200'>
    
        <div className='container'>
    
            <div className='flex flex-col md:flex-row  gap-12 justify-between items-center'>
    
                <div className='flex gap-1 w-full flex-col'>
                    <h1 className='text-lg'> {title} </h1>
                    <h2 className=' text-xl lg:text-3xl font-semibold'> {subtitle}</h2>
                    <p className=' '>  {content}</p>
                </div>
                <div className=' md:basis-96 flex items-center justify-end'>
                   { icon &&  <Image src={icon}  width={100} height={150} alt='' /> }
                </div>
    
            </div>
    
        </div>
    
    </div>
  )
}

export default PageHero