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

/**
 * 卡片变体，对应 DESIGN.md：
 * - base    → card-base（白底 + hairline 描边）
 * - feature → card-feature（surface 底、无描边）
 * - mockup  → hero-product-mockup（含大扩散阴影，仅 Hero 使用）
 */
export const cardVariants = cva("", {
	variants: {
		variant: {
			base: "bg-canvas border border-hairline rounded-lg",
			feature: "bg-surface rounded-lg",
			mockup: "bg-canvas border border-hairline-soft rounded-lg shadow-mockup",
		},
		padding: {
			none: "p-0",
			sm: "p-md",
			md: "p-xl",
			lg: "p-xxl",
		},
	},
	defaultVariants: {
		variant: "base",
		padding: "md",
	},
});

export type CardProps = HTMLAttributes<HTMLDivElement> &
	VariantProps<typeof cardVariants>;

/** 通用卡片容器 */
export function Card({ className, variant, padding, ...props }: CardProps) {
	return (
		<div
			className={cn(cardVariants({ variant, padding }), className)}
			{...props}
		/>
	);
}