---
// Import PrimaryCTA component
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';

// Destructure the props passed to the Astro component
const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props;
// Define TypeScript interface for props
interface Props {
  title: string;
  subTitle: string;
  btnExists?: boolean;
  btnTitle?: string;
  btnURL?: string;
}
---

{/* Root section of the component */}
<section
  class="mx-auto mt-10 max-w-[85rem] px-4 py-10 sm:px-6 sm:py-16 lg:px-8 lg:py-14 2xl:max-w-full"
>
  <div class="min-w-0 max-w-(--breakpoint-md)">
    {/* Section title */}
    <h1
      class="mb-4 text-4xl font-extrabold tracking-tight break-words text-balance text-neutral-800 dark:text-neutral-200"
    >
      {title}
    </h1>
    {/* Section subtitle */}
    <p
      class="mb-8 max-w-prose font-normal break-words text-pretty text-neutral-600 sm:text-xl dark:text-neutral-400"
    >
      {subTitle}
    </p>
    {
      /* Conditional rendering of PrimaryCTA component if 'btnExists' property is truthy */
    }
    {
      btnExists ? (
        <div class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4">
          <PrimaryCTA title={btnTitle} url={btnURL} />
        </div>
      ) : null
    }
  </div>
</section>