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

/**
 * Prose container component for rich text content with proper typography styling
 *
 * @example
 * ```tsx
 * <Prose>
 *   <h1>Article Title</h1>
 *   <p>This is a paragraph with <a href="#">link</a> and some <strong>bold text</strong>.</p>
 *   <blockquote>A nice quote here.</blockquote>
 * </Prose>
 * ```
 */

const proseVariants = cva(
	"prose dark:prose-invert prose-headings:scroll-m-20 prose-headings:font-semibold prose-p:leading-7 prose-a:underline-offset-2 prose-a:font-medium prose-a:transition-colors",
	{
		variants: {
			variant: {
				default: "prose-russet max-w-none",
				literary: "prose-russet prose-lg font-serif max-w-prose",
				academic: "prose-stone prose-sm max-w-3xl",
				article: "prose-russet prose-lg max-w-3xl mx-auto",
				compact: "prose-russet prose-sm max-w-none",
			},
			size: {
				sm: "prose-sm",
				base: "prose-base",
				lg: "prose-lg",
				xl: "prose-xl",
				"2xl": "prose-2xl",
			},
		},
		defaultVariants: {
			variant: "default",
			size: "base",
		},
	},
);

export interface ProseProps
	extends React.HTMLAttributes<HTMLDivElement>,
		VariantProps<typeof proseVariants> {}

const Prose = forwardRef<HTMLDivElement, ProseProps>(
	({ className, variant, size, ...props }, ref) => {
		return (
			<div
				className={cn(proseVariants({ variant, size, className }))}
				ref={ref}
				{...props}
			/>
		);
	},
);

Prose.displayName = "Prose";

export { Prose, proseVariants };
