import React from 'react'

const Title = ({children, subtitle, className, titleClass, h1, ...props}) => {
    return (
        <div className={['flex max-md:flex-col justify-between items-start w-full', className].join(' ')} {...props}>
            {h1
            ?
            <h1 className={['text-black max-w-[845px] max-md:max-w-none max-md:w-full font-semibold max-md:text-2xl max-xl:text-4xl max-2xl:text-[38px] max-md:mb-5 text-[44px]', titleClass].join(' ')}>{children}</h1>
            :
            <h2 className={['text-black max-w-[845px] max-md:max-w-none max-md:w-full font-semibold max-md:text-2xl max-xl:text-4xl max-2xl:text-[38px] max-md:mb-5 text-[44px]', titleClass].join(' ')}>{children}</h2>
            }
            
            <p className='text-slate-600 max-w-[300px]'>{subtitle}</p>
        </div>
    )
}

export default Title;