import type { ElementType, HTMLAttributes, ReactNode } from "react";
import { cn } from "../../lib/cn";

export type TextProps<C extends ElementType = "p"> = {
  as?: C;
  children?: ReactNode;
  className?: string;
  tone?: "primary" | "secondary" | "tertiary";
  size?: "sm" | "base" | "lg";
} & Omit<HTMLAttributes<HTMLElement>, "children" | "className">;

export function Text<C extends ElementType = "p">({
  as,
  children,
  className,
  size = "base",
  tone = "primary",
  ...props
}: TextProps<C>) {
  const Component = (as ?? "p") as ElementType;
  return (
    <Component
      className={cn(
        "m-0",
        size === "sm" ? "text-sm leading-6" : size === "lg" ? "text-lg leading-7" : "text-base leading-7",
        tone === "primary"
          ? "text-[var(--uhuru-text-primary)]"
          : tone === "secondary"
            ? "text-[var(--uhuru-text-secondary)]"
            : "text-[var(--uhuru-text-tertiary)]",
        className,
      )}
      {...props}
    >
      {children}
    </Component>
  );
}