"use client";

import { cva, type VariantProps } from "class-variance-authority";

import type { PlateElementProps } from "platejs/react";
import { PlateElement } from "platejs/react";
import * as React from "react";

const headingVariants = cva("relative mb-1 first:mt-0", {
	variants: {
		variant: {
			h1: "mt-[1.6em] pb-1 font-bold font-heading text-4xl",
			h2: "mt-[1.4em] pb-px font-heading font-semibold text-2xl tracking-tight",
			h3: "mt-[1em] pb-px font-heading font-semibold text-xl tracking-tight",
			h4: "mt-[0.75em] font-heading font-semibold text-lg tracking-tight",
			h5: "mt-[0.75em] font-semibold text-lg tracking-tight",
			h6: "mt-[0.75em] font-semibold text-base tracking-tight",
		},
	},
});

export function HeadingElement({
	variant = "h1",
	...props
}: PlateElementProps & VariantProps<typeof headingVariants>) {
	return (
		<PlateElement as={variant!} className={headingVariants({ variant })} {...props}>
			{props.children}
		</PlateElement>
	);
}

export function H1Element(props: PlateElementProps) {
	return <HeadingElement variant="h1" {...props} />;
}

export function H2Element(props: PlateElementProps) {
	return <HeadingElement variant="h2" {...props} />;
}

export function H3Element(props: PlateElementProps) {
	return <HeadingElement variant="h3" {...props} />;
}

export function H4Element(props: PlateElementProps) {
	return <HeadingElement variant="h4" {...props} />;
}

export function H5Element(props: PlateElementProps) {
	return <HeadingElement variant="h5" {...props} />;
}

export function H6Element(props: PlateElementProps) {
	return <HeadingElement variant="h6" {...props} />;
}