import React from 'react';
import { cn } from '@/lib/utils';

const colorVariants = {
  primary: 'text-[#2F3178]',
  secondary: 'text-gray-600',
  custom: 'text-[#1c1c49]',
};

type TextProps<E extends React.ElementType> = {
  as?: E;
  children: React.ReactNode;
  className?: string;
  color?: keyof typeof colorVariants;
} & Omit<React.ComponentPropsWithoutRef<E>, 'as' | 'children' | 'className' | 'color'>;

const createTextComponent = <E extends React.ElementType>(
  defaultElement: E,
  defaultClassName: string
) => {
  const Component = React.forwardRef<React.ElementRef<E>, TextProps<E>>(
    ({ as, color = 'primary', className, children, ...props }, ref) => {
      const Tag = as || defaultElement;
      return (
        <Tag
          ref={ref}
          className={cn(defaultClassName, colorVariants[color], className)}
          {...props}
        >
          {children}
        </Tag>
      );
    }
  );

  Component.displayName = `Text(${defaultElement})`;
  return Component;
};

export const H1 = createTextComponent('h1', 'text-5xl font-medium tracking-tight text-balance lg:text-8xl');
export const PL = createTextComponent('p', 'text-2xl font-medium text-pretty leading-[1.2] lg:text-3xl');
export const H2 = createTextComponent('h2', 'text-4xl font-medium text-pretty lg:text-5xl');
export const P = createTextComponent('p', 'text-xl font-normal text-pretty lg:text-2xl');
export const H3 = createTextComponent('h3', 'text-3xl lg:text-4xl font-medium');
export const H4 = createTextComponent('h4', 'text-2xl lg:text-3xl font-semibold leading-tight');
export const CT = createTextComponent('span', 'text-base lg:text-xl font-semibold text-center');
export const CP = createTextComponent('p', 'text-sm lg:text-base leading-relaxed font-light');
export const NL = createTextComponent('span', 'text-lg font-semibold leading-6');