"use client"

import * as React from "react"

import { cn } from "../../lib/utils"

/**
 * A heading takes its typography from the shared rule set in index.css, never inline: level 1 is the
 * page title, 2 and 3 a section heading, 4 to 6 a card title. The shared rules also set its margin.
 */
export type HeadingLevel = number | string

export function headingClass(level: HeadingLevel = 2): string {
    const n = Number(level)
    if (n <= 1) return "ak-page-title"
    if (n <= 3) return "ak-section-title"
    return "ak-card__title"
}

type HeadingProps = Omit<React.ComponentProps<"h2">, "color"> & {
    level?: HeadingLevel
    align?: React.CSSProperties["textAlign"]
}

function Heading({ level = 2, align, className, style, ...props }: HeadingProps) {
    const n = Math.min(6, Math.max(1, Number(level) || 2))
    const Component = `h${n}` as React.ElementType

    return (
        <Component
            data-slot="heading"
            className={cn(headingClass(n), className)}
            style={align === undefined ? style : { textAlign: align, ...style }}
            {...props}
        />
    )
}

export { Heading }