---
interface Props {
  Tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
  lineColour?: string;
  lineColourDark?: string;
  class?: string;
}

const {
  Tag = "h1",
  lineColour = "border-primary",
  lineColourDark = "dark:text-primary",
  class: className
} = Astro.props;
---

<div class={className}>
  <Tag class="font-header m-0 text-center text-3xl"><slot /></Tag>
  <hr class={`mx-auto my-4 w-16 border-2 ${lineColour} ${lineColourDark}`} />
</div>