import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

/**
 * 区块标题：DESIGN.md 中反复出现的「大写微标签 + 标题 + 描述」结构。
 * 微标签使用 {typography.micro-uppercase}（11px / 600 / +0.5px 字距）。
 */
export interface SectionHeadingProps {
	/** 标签上方的大写微标签 */
	eyebrow?: string;
	title: ReactNode;
	description?: ReactNode;
	className?: string;
	/** 对齐方式，默认居中（营销区块）；文档面可用 left */
	align?: "center" | "left";
	as?: "h1" | "h2" | "h3";
}

export function SectionHeading({
	eyebrow,
	title,
	description,
	className,
	align = "center",
	as: Heading = "h2",
}: SectionHeadingProps) {
	return (
		<div
			className={cn(
				"flex flex-col gap-sm",
				align === "center" ? "items-center text-center" : "items-start text-left",
				className,
			)}
		>
			{eyebrow ? (
				<p className="text-micro-uppercase font-semibold uppercase tracking-[0.5px] text-steel">
					{eyebrow}
				</p>
			) : null}

			<Heading className="text-heading-2 font-semibold text-ink text-balance-pretty">
				{title}
			</Heading>

			{description ? (
				<p className="max-w-[640px] text-subtitle text-steel text-balance-pretty">
					{description}
				</p>
			) : null}
		</div>
	);
}