"use client";
import { ease } from "@unom/style";
import { cva, type VariantProps } from "class-variance-authority";
import { type HTMLMotionProps, motion } from "motion/react";
import { type FC, forwardRef, type HTMLProps } from "react";
import { z } from "zod";
import { cn } from "@/lib/utils";

const TextTagHeadingOptions = ["h1", "h2", "h3", "h4", "h5"] as const;
const TextTagContentOptions = ["span", "p"] as const;

export const TextTag = z.enum([
	...TextTagHeadingOptions,
	...TextTagContentOptions,
]);

const textVariants = cva(null, {
	variants: {
		color: {
			default: "",
			main: "",
			secondary: "text-secondary",
			neutral: "text-neutral",
		},
	},
});

type Tags = z.output<typeof TextTag>;

type TextProps = {
	tag: Tags;
} & HTMLProps<HTMLHeadingElement> &
	VariantProps<typeof textVariants>;

const Text = forwardRef<HTMLHeadingElement, TextProps>(
	({ tag, color, className, ...props }, ref) => {
		const Component = tag;

		return (
			<Component
				ref={ref}
				className={cn(textVariants({ color, className }))}
				{...props}
			>
				{props.children}
			</Component>
		);
	},
);

Text.displayName = "Text";

const MText = motion.create(Text);

const AnimatedText: FC<TextProps & HTMLMotionProps<Tags>> = (props) => {
	return (
		<MText
			variants={{
				enter: {
					y: 0,
					opacity: 1,
				},
				from: {
					y: 10,
					opacity: 0,
				},
			}}
			transition={ease.quint(0.8).out}
			ref={props.ref}
			{...props}
		/>
	);
};

export default AnimatedText;
