'use client'

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

const colorVariants = {
  primary: 'text-[#fffff]',
  secondary: 'text-gray-200',
  custom: 'text-[#015eff]',
  light: 'text-white',
} as const

type TextOwnProps = {
  color?: keyof typeof colorVariants
  className?: string
}

// Polymorphic helpers (no forwardRef needed)
type PolymorphicProps<E extends React.ElementType, P> =
  P & { as?: E } &
  Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>

const createTextComponent = <DefaultElement extends React.ElementType>(
  defaultElement: DefaultElement,
  defaultClassName: string
) => {
  type Props<E extends React.ElementType = DefaultElement> =
    PolymorphicProps<E, TextOwnProps>

  function Text<E extends React.ElementType = DefaultElement>({
    as,
    color = 'primary',
    className,
    children,
    ...props
  }: Props<E>) {
    const Tag = (as || defaultElement) as React.ElementType
    return (
      <Tag
        className={cn(defaultClassName, colorVariants[color], className)}
        {...(props as object)}
      >
        {children}
      </Tag>
    )
  }

  ;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'})`
  return Text
}

// Exports
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-3xl font-medium text-pretty lg:text-4xl')
export const P  = createTextComponent('p', 'text-lg font-normal text-pretty lg:text-xl')
export const H3 = createTextComponent('h3', 'text-2xl lg:text-3xl font-medium')
export const H4 = createTextComponent('h4', 'text-xl lg:text-2xl font-semibold leading-tight')
export const CT = createTextComponent('span', 'text-lg 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')