export function SectionHeading(props: {
  href: string
  title: string
  description?: string
  as?: "h2" | "p"
  slot?: string
}) {
  const content = (
    <>
      <strong>
        <a data-slot="heading-link" href={props.href}>
          <span data-slot="heading-anchor" aria-hidden="true">
            #
          </span>
          {props.title}
          {props.description ? "." : ""}
        </a>
      </strong>
      {props.description && (
        <>
          {" "}
          <span>{props.description}</span>
        </>
      )}
    </>
  )

  if (props.as === "h2") return <h2 data-slot={props.slot ?? "section-title"}>{content}</h2>
  return <p data-slot={props.slot ?? "section-title"}>{content}</p>
}