import type { VariantProps } from "class-variance-authority";
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { cva } from "class-variance-authority";
import { cn } from "@reactive-resume/utils/style";

const markerVariants = cva(
	"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
	{
		variants: {
			variant: {
				default: "",
				separator:
					"before:me-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ms-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
				border: "border-border border-b pb-2",
			},
		},
	},
);

function Marker({
	className,
	variant = "default",
	render,
	...props
}: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>) {
	return useRender({
		defaultTagName: "div",
		props: mergeProps<"div">(
			{
				className: cn(markerVariants({ variant }), className),
			},
			props,
		),
		render,
		state: { slot: "marker", variant },
	});
}

function MarkerIcon({ className, ...props }: React.ComponentProps<"span">) {
	return (
		<span
			data-slot="marker-icon"
			aria-hidden="true"
			className={cn("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className)}
			{...props}
		/>
	);
}

function MarkerContent({ className, ...props }: React.ComponentProps<"span">) {
	return (
		<span
			data-slot="marker-content"
			className={cn(
				"min-w-0 break-words group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
				className,
			)}
			{...props}
		/>
	);
}

export { Marker, MarkerContent, MarkerIcon, markerVariants };
