---
import { cn } from '@/libs/cn'

type Props = {
  title?: string
  description?: string
  className?: string
  id?: string
}

const { title, description, className, id } = Astro.props
---

<section
  class={cn('flex flex-col gap-6 py-12 px-4 md:py-24 md:px-16 lg:px-24 md:gap-12', className)}
  id={id}
>
  {
    (title || description) && (
      <div class="flex w-full max-w-[750px] flex-col gap-6 self-center text-center">
        {title && (
          <h2 class="text-4xl font-bold leading-tight md:text-5xl">
            <Fragment set:html={title} />
          </h2>
        )}
        {description && <p>{description}</p>}
      </div>
    )
  }
  <slot />
</section>