---
import PrimaryCTA from '@components/buttons/PrimaryCTA.astro'

const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props

interface Props {
    title: string
    subTitle: string
    btnExists?: boolean
    btnTitle?: string
    btnURL?: string
}
---
<section class="mx-auto mt-10 px-4 sm:px-6 lg:px-8 lg:pt-10 2xl:max-w-full">
    <div class="md:flex md:justify-between md:items-center flex-wrap">
        <div class="w-full md:w-auto">
            <h1 class="block text-balance text-4xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-5xl lg:text-6xl">
                {title}
            </h1>
            <p class="mt-4 text-pretty text-lg text-neutral-600 dark:text-neutral-400">
                {subTitle}
            </p>
        </div>
    {
        btnExists
        ? (
        <div class="md:w-auto mt-4 md:mt-0">
            <PrimaryCTA title={btnTitle} url={btnURL} />
        </div>
        )
        : null
    }
    </div>
</section>
