web/apps/scandic-web/components/Section/Header/index.tsx

import { cx, type VariantProps } from "class-variance-authority"

import { Typography } from "@scandic-hotels/design-system/Typography"

import { headingVariants } from "@/components/Section/Header/headingVariants"

import SectionLink from "../Link"

import styles from "./header.module.css"

import type { HTMLAttributes } from "react"

interface SectionHeaderProps
  extends HTMLAttributes<HTMLElement>, VariantProps<typeof headingVariants> {
  heading?: string | null
  headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
  preamble?: string | null
  link?: {
    href: string
    text: string
  }
}

export function SectionHeader({
  className,
  heading,
  preamble,
  link,
  typography = "Title/sm",
  headingLevel = "h2",
  ...props
}: SectionHeaderProps) {
  if (!heading && !preamble && !link) {
    return null
  }
  const headingClassNames = headingVariants({ typography })
  const Hx = headingLevel

  return (
    <header className={cx(styles.header, className)} {...props}>
      <Hx className={headingClassNames}>{heading}</Hx>
      {preamble ? (
        <Typography
          variant="Body/Paragraph/mdRegular"
          className={styles.preamble}
        >
          <p>{preamble}</p>
        </Typography>
      ) : null}
      {link ? <SectionLink link={link} variant="desktop" /> : null}
    </header>
  )
}