www_projectmycelium_com/src/components/Texts.tsx

'use client'

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

const fontVariants = {
  sans: 'font-sans',
  neuton: 'font-neuton',
} as const

const colorVariants = {
  primary: 'text-gray-900',
  secondary: 'text-gray-600',
  light: 'text-gray-50',
  accent: 'text-cyan-500',
  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
}

// 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
) => {
  type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
    E,
    TextOwnProps
  >

  function Text<E extends React.ElementType = DefaultElement>({
    font = 'sans',
    as,
    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
export const H1 = createTextComponent(
  'h1',
  'text-6xl lg:text-7xl font-medium leading-tight tracking-tight'
)
export const H2 = createTextComponent(
  'h2',
  'text-4xl lg:text-6xl font-medium leading-tight tracking-tight'
)
export const H3 = createTextComponent(
  'h3',
  'text-3xl lg:text-5xl font-medium leading-tight tracking-tight'
)
export const H4 = createTextComponent(
  'h4',
  'text-2xl lg:text-4xl font-medium leading-snug tracking-tight'
)
export const P = createTextComponent(
  'p',
  'text-base lg:text-lg leading-relaxed'
)
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'
)
export const H5 = createTextComponent(
  'h5',
  'text-xl lg:text-2xl font-light leading-snug tracking-normal'
)
export const Eyebrow = createTextComponent(
  'h2',
  'text-base/7 font-semibold tracking-wide'
)
export const SectionHeader = createTextComponent(
  'p',
  'text-3xl lg:text-4xl font-medium leading-tight tracking-tight'
)
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'
)
export const FeatureTitle = createTextComponent(
  'h3',
  'text-lg font-semibold leading-snug tracking-tight'
)
export const FeatureDescription = createTextComponent(
  'p',
  'text-sm leading-normal tracking-normal'
)
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'
)
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'
)

export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
export const CP = createTextComponent('p', 'text-sm lg:text-sm leading-[1.525] font-light')