import type { HTMLAttributes, ElementType } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

/**
 * 容器：统一站点内容宽度与左右留白。
 * DESIGN.md：营销页面 1280px 最大宽度 + 32px 沟槽。
 */
const containerVariants = cva("mx-auto w-full", {
	variants: {
		size: {
			// 文章正文最舒适的阅读宽度
			prose: "max-w-[720px]",
			default: "max-w-[1280px]",
			narrow: "max-w-[960px]",
		},
		gutter: {
			default: "px-lg sm:px-xxl",
			none: "px-0",
		},
	},
	defaultVariants: {
		size: "default",
		gutter: "default",
	},
});

export type ContainerProps = HTMLAttributes<HTMLElement> &
	VariantProps<typeof containerVariants> & {
		/** 渲染的语义化标签，默认 div */
		as?: ElementType;
	};

export function Container({
	className,
	size,
	gutter,
	as: Component = "div",
	...props
}: ContainerProps) {
	return (
		<Component
			className={cn(containerVariants({ size, gutter }), className)}
			{...props}
		/>
	);
}

/**
 * 区块：负责垂直节奏。
 * DESIGN.md：营销页区块之间 96px，文档面 32–64px。
 */
const sectionVariants = cva("w-full", {
	variants: {
		spacing: {
			none: "py-0",
			sm: "py-section-sm",
			default: "py-section",
			lg: "py-section-lg",
		},
	},
	defaultVariants: {
		spacing: "default",
	},
});

export type SectionProps = HTMLAttributes<HTMLElement> &
	VariantProps<typeof sectionVariants> & {
		as?: ElementType;
	};

export function Section({
	className,
	spacing,
	as: Component = "section",
	...props
}: SectionProps) {
	return (
		<Component
			className={cn(sectionVariants({ spacing }), className)}
			{...props}
		/>
	);
}