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

/**
 * Paragraph component for displaying body text
 *
 * @example
 * ```tsx
 * <Paragraph>Default paragraph text</Paragraph>
 * <Paragraph size="sm" variant="muted">Small muted text</Paragraph>
 * <Paragraph leading="relaxed" variant="serif">Literary text with relaxed line height</Paragraph>
 * ```
 */

const paragraphVariants = cva("text-base", {
	variants: {
		variant: {
			default: "text-foreground",
			muted: "text-muted-foreground",
			primary: "text-primary",
			serif: "font-serif",
			prose: "font-serif text-justify",
			literary: "font-serif text-justify italic",
		},
		size: {
			xs: "text-xs",
			sm: "text-sm",
			base: "text-base",
			lg: "text-lg",
			xl: "text-xl",
		},
		weight: {
			default: "font-normal",
			medium: "font-medium",
			semibold: "font-semibold",
			bold: "font-bold",
		},
		leading: {
			default: "leading-normal",
			tight: "leading-tight",
			snug: "leading-snug",
			relaxed: "leading-relaxed",
			loose: "leading-loose",
		},
	},
	defaultVariants: {
		variant: "default",
		size: "base",
		weight: "default",
		leading: "default",
	},
});

export interface ParagraphProps
	extends React.HTMLAttributes<HTMLParagraphElement>,
		VariantProps<typeof paragraphVariants> {
	/**
	 * Whether to render as a different HTML element via Radix Slot
	 */
	asChild?: boolean;
}

const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(
	(
		{ className, variant, size, weight, leading, asChild = false, ...props },
		ref,
	) => {
		const Comp = asChild ? Slot : "p";
		return (
			<Comp
				className={cn(
					paragraphVariants({ variant, size, weight, leading, className }),
				)}
				ref={ref}
				{...props}
			/>
		);
	},
);

Paragraph.displayName = "Paragraph";

export { Paragraph, paragraphVariants };
