"use client"

import * as React from "react"

import { cn } from "../../lib/utils"

/**
 * `Text` draws its type from the shared text classes; it writes no inline typography, so a page rule
 * can still reach it. A bare Text inherits the type around it. Muted text is the muted sub line, or
 * the help line below 13px or when weighted; a weighted Text is a card title, or a caption at 11px and under.
 */

const PRESET_PX: Record<string, number> = {
  caption: 10,
  footnote: 11,
  subheadline: 12,
  body: 13,
  small: 13,
  title: 20,
  largeTitle: 28,
}

export type TextSize = string | number | undefined

function sizePx(size: TextSize): number | undefined {
  if (size === undefined) return undefined
  if (typeof size === "number") return size
  if (size in PRESET_PX) return PRESET_PX[size]
  const parsed = parseFloat(size)
  return Number.isNaN(parsed) ? undefined : parsed
}

export interface TextStyleProps {
  size?: TextSize
  variant?: "muted"
  weight?: React.CSSProperties["fontWeight"]
}

export function textClass({ size, variant, weight }: TextStyleProps): string | undefined {
  const px = sizePx(size)
  const weighted = weight === "bold" || Number(weight) >= 500
  if (variant === "muted") {
    if (weighted) return "ak-field-help font-semibold"
    return px !== undefined && px < 13 ? "ak-field-help" : "ak-page-title__sub"
  }
  if (weighted) return px !== undefined && px <= 11 ? "ak-caption" : "ak-card__title"
  return undefined
}

type TextProps = Omit<React.ComponentProps<"span">, "color"> &
  TextStyleProps & {
    as?: React.ElementType
  }

function Text({ size, variant, weight, as, className, ...props }: TextProps) {
  const Component = as ?? "span"

  return (
    <Component
      data-slot="text"
      className={cn("m-0 text-pretty", textClass({ size, variant, weight }), className)}
      {...props}
    />
  )
}

export { Text }