---
/**
 * SectionHeader - Reusable section header with divider lines
 * Pixel-perfect implementation based on Webflow design
 */

interface Props {
  title: string;
  subtitle: string;
  class?: string;
  sectionBg?: string;
}

const {
  title,
  subtitle,
  class: className,
  sectionBg: classNameBg,
} = Astro.props;
---

<section class:list={classNameBg}>
  <div
    class:list={[
      "flex flex-rows sm:max-w-lg px-8 md:px-0 md:max-w-xl lg:max-w-3xl items-center justify-center gap-4 pt-2 pb-10 mx-auto",
      className,
    ]}
  >
    <div class="w-full h-px bg-(--color-enchunblue)"></div>
    <div class="text-center">
      <h2
        class="text-(--color-dark-blue) font-['Noto_Sans_TC'] font-bold text-xl md:text-3xl whitespace-nowrap"
      >
        {title}
      </h2>
      <p
        class="text-gray-600) font-['Quicksand'] font-thin text-lg md:text-2xl tracking-wider whitespace-nowrap"
      >
        {subtitle}
      </p>
    </div>
    <div class="w-full h-px bg-(--color-enchunblue)"></div>
  </div>
</section>
