"use client";
import { ease } from "@unom/style";
import { cva, type VariantProps } from "class-variance-authority";
import { motion } from "motion/react";
import type { FC, ReactElement, ReactNode } from "react";
import Text from "@/text";
import { cn } from "@/lib/utils";

type HeadingProps = {
	/*** Is this the main heading of the page? Uses h1 if true. */
	main?: boolean;
	/*** Subtitle for additional information */
	subtitle?: ReactElement | string;
	/*** IconComponent showed above title */
	IconComponent?: ReactElement;
	children?: ReactNode;
	className?: string;
};

const headingVariants = cva("max-w-[800px]", {
	variants: {
		padding: {
			true: "py-4",
			false: "p-0",
		},
		color: {
			main: "text-main",
			secondary: "text-main/70",
			neutral: "text-neutral",
		},
	},
	defaultVariants: {
		color: "main",
	},
});

const Heading: FC<HeadingProps & VariantProps<typeof headingVariants>> = ({
	children,
	main = false,
	IconComponent,
	padding,
	color,
	subtitle,
	className,
}) => {
	return (
		<div className="relative mb-8">
			{IconComponent && (
				<>
					<div
						className="z-20 absolute w-full h-24 top-8 -left-8 
          bg-linear-to-t from-neutral to-transparent"
					/>

					<div className="relative z-10">
						<motion.div
							className="text-highlight 
              drop-shadow-[0px_0px_10px_hsl(var(--color-highlight)/0.5)] 
              w-fit h-fit"
							transition={ease.quint(2.5).out}
							variants={{
								enter: { y: 20, scale: 1, x: -30, rotate: -15 },
								from: { y: 100, scale: 0, x: 0, rotate: 0 },
							}}
						>
							{IconComponent}
						</motion.div>
					</div>
				</>
			)}
			<div className="relative z-30 mb-2">
				<Text
					tag={main ? "h1" : "h2"}
					className={cn(
						headingVariants({ className, padding, color }),
						"my-4",
						subtitle ? "mb-2" : main ? "mb-2" : "mb-1",
					)}
				>
					{children}
				</Text>
				{subtitle && (
					<Text
						tag="h3"
						className="max-w-[600px]"
						color={color === "neutral" ? "neutral" : "secondary"}
					>
						{subtitle}
					</Text>
				)}
			</div>
		</div>
	);
};

export default Heading;
