import { cn } from '@/lib/cn';
import { cva, type VariantProps } from 'class-variance-authority';
import { createElement, type HTMLAttributes, type ReactNode } from 'react';

const headingVariants = cva(
    'font-semibold leading-tight tracking-tight text-foreground',
    {
        variants: {
            size: {
                sm: 'text-2xl md:text-3xl',
                md: 'text-3xl md:text-4xl',
                lg: 'text-4xl md:text-5xl',
                xl: 'text-5xl md:text-7xl',
            },
        },
        defaultVariants: {
            size: 'lg',
        },
    },
);

type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
    VariantProps<typeof headingVariants> & {
        as?: 'h1' | 'h2' | 'h3';
        accent?: ReactNode;
        children: ReactNode;
    };

export function Heading({
    as = 'h1',
    size,
    accent,
    className,
    children,
    ...rest
}: HeadingProps) {
    return createElement(
        as,
        { className: cn(headingVariants({ size }), className), ...rest },
        <>
            {children}
            {accent && (
                <>
                    {' '}
                    <span className="bg-gradient-to-r from-accent to-accent-secondary bg-clip-text text-transparent">
                        {accent}
                    </span>
                </>
            )}
        </>,
    );
}
