'use client'

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

const fontVariants = {
  sans: 'font-sans',
  neuton: 'font-neuton',
  quicking: 'font-quicking',
  sourceLight: 'font-source-sans-light',
} as const

const colorVariants = {
  primary: 'text-gray-900',
  secondary: 'text-gray-600',
  light: 'text-gray-50',
  accent: 'text-cyan-400',
  cyan: 'text-cyan-400',
  white: 'text-white',
  dark: 'text-gray-950',
  tertiary: 'text-gray-700',
  lightSecondary: 'text-gray-300',
} as const

type TextOwnProps = {
  font?: keyof typeof fontVariants
  color?: keyof typeof colorVariants
  className?: string
  children?: React.ReactNode
}

// Polymorphic helpers
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,
  defaultProps: Omit<TextOwnProps, 'className' | 'children'> = {}
) => {
  type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
    E,
    TextOwnProps
  >

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

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

// Exports based on your tailwind.css and the example
// Headings default to Quicking font
export const H1 = createTextComponent(
  'h1',
  'text-5xl lg:text-7xl font-medium leading-[0.95] lg:leading-tight  tracking-tight',
  { font: 'quicking' }
)
export const H2 = createTextComponent(
  'h2',
  'text-3xl lg:text-5xl font-medium leading-tight tracking-tight',
  { font: 'quicking' }
)
export const H3 = createTextComponent(
  'h3',
  'text-3xl lg:text-4xl font-medium leading-tight tracking-tight',
  { font: 'quicking' }
)
export const H4 = createTextComponent(
  'h4',
  'text-2xl lg:text-3xl font-medium leading-snug tracking-tight',
  { font: 'quicking' }
)

// Paragraph-style text defaults to Avenir (font-sans)
export const P = createTextComponent(
  'p',
  'text-base lg:text-xl leading-relaxed',
  { font: 'sans' }
)

export const PS = createTextComponent(
  'p',
  'text-base lg:text-lg leading-relaxed',
  { font: 'sans' }
)

export const Small = createTextComponent(
  'small',
  'text-sm font-medium leading-normal tracking-normal'
)
export const Subtle = createTextComponent(
  'p',
  'text-sm leading-normal tracking-normal text-gray-500',
  { font: 'sans' }
)
export const H5 = createTextComponent(
  'h5',
  'text-xl lg:text-2xl font-light lg:leading-snug leading-[0.85] tracking-normal'
)
export const Eyebrow = createTextComponent(
  'h2',
  'text-base/7 font-semibold  uppercase tracking-[0.16em]',
  { color: 'accent' }
)

export const CardEyebrow = createTextComponent(
  'h3',
  'text-sm/4 font-semibold tracking-wide'
)
export const CardTitle = createTextComponent(
  'p',
  'text-lg font-medium leading-snug tracking-tight'
)
export const CardDescription = createTextComponent(
  'p',
  'text-sm/6 leading-normal tracking-normal',
  { font: 'sans' }
)
export const FeatureTitle = createTextComponent(
  'h3',
  'text-lg font-semibold leading-snug tracking-tight'
)
export const FeatureDescription = createTextComponent(
  'p',
  'lg:text-base text-sm leading-normal tracking-normal',
  { font: 'sans' }
)
export const MobileFeatureTitle = createTextComponent(
  'h3',
  'text-sm font-semibold sm:text-lg leading-snug tracking-tight'
)
export const SecondaryFeatureTitle = createTextComponent(
  'h3',
  'text-base font-semibold leading-snug tracking-tight'
)
export const Question = createTextComponent(
  'h3',
  'text-lg/6 font-semibold tracking-tight'
)
export const Answer = createTextComponent(
  'p',
  'mt-4 text-sm leading-normal tracking-normal',
  { font: 'sans' }
)
export const PageHeader = createTextComponent(
  'h2',
  'text-5xl lg:text-6xl font-medium leading-tight tracking-tight'
)
export const DownloadCardTitle = createTextComponent(
  'dt',
  'text-base/7 font-semibold tracking-wide'
)
export const DownloadCardDescription = createTextComponent(
  'dd',
  'text-base/7 leading-normal tracking-normal',
  { font: 'sans' }
)

export const CT = createTextComponent(
  'span',
  'text-base lg:text-lg leading-normal font-medium',
  { font: 'quicking' }
)
export const CP = createTextComponent(
  'p',
  'text-base lg:text-lg tracking-normal leading-normal font-light',
  { font: 'sans' }
)
