import * as React from 'react';

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

export const textVariants = {
  eyebrow: 'text-xs uppercase tracking-l',
  body: 'text-sm sm:text-base leading-relaxed',
  bodyLarge: 'text-base sm:text-lg leading-relaxed',
  bodySmall: 'text-sm leading-relaxed',
  label: 'text-sm sm:text-base tracking-m font-semibold',
  helper: 'text-sm leading-relaxed',
  caption: 'text-xs sm:text-sm tracking-s',
  meta: 'text-[11px] font-semibold uppercase tracking-m',
  controlLabel: 'text-[11px] font-semibold uppercase tracking-m',
} as const;

export const headingVariants = {
  pageTitle: 'text-3xl sm:text-5xl font-slab font-bold leading-tight',
  sectionTitle: 'text-3xl sm:text-4xl lg:text-5xl leading-tight font-semibold uppercase',
  cardTitle: 'text-[15px] font-semibold leading-tight',
} as const;

export const typographyTones = {
  inherit: '',
  strong: 'text-brand-primary',
  muted: 'text-brand-primary/75',
  inverse: 'text-brand-secondary',
  inverseMuted: 'text-brand-secondary/75',
  brand: 'text-brand-blue',
  accent: 'text-brand-yellow',
} as const;

export type TextVariant = keyof typeof textVariants;
export type HeadingVariant = keyof typeof headingVariants;
export type TypographyTone = keyof typeof typographyTones;

type TextElement = 'p' | 'span' | 'div' | 'label' | 'small';
type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

export interface TextProps extends React.HTMLAttributes<HTMLElement> {
  as?: TextElement;
  variant?: TextVariant;
  tone?: TypographyTone;
}

export function Text({
  as: Component = 'p',
  variant = 'body',
  tone = 'inherit',
  className,
  ...props
}: TextProps) {
  return (
    <Component className={cn(textVariants[variant], typographyTones[tone], className)} {...props} />
  );
}

export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
  as?: HeadingElement;
  variant?: HeadingVariant;
  tone?: TypographyTone;
}

export function Heading({
  as: Component = 'h2',
  variant = 'sectionTitle',
  tone = 'inherit',
  className,
  ...props
}: HeadingProps) {
  return (
    <Component
      className={cn(headingVariants[variant], typographyTones[tone], className)}
      {...props}
    />
  );
}