import clsx from "clsx";
import * as React from "react";
import { useDebugEvents } from "../../utils";
import { TooltipSymbol } from "../Tooltip";
import * as styles from "./styles.module.css";

interface TextProps extends React.ComponentPropsWithoutRef<"span"> {
  "data-id": string;
  as: string | React.ElementType;
  noOfLines?: number;
  size?:
    | "inherit"
    | "2xs"
    | "xs"
    | "sm"
    | "md"
    | "lg"
    | "xl"
    | "2xl"
    | "3xl"
    | "4xl"
    | "5xl"
    | "6xl"
    | "7xl";
  variant?: "body" | "header" | "label";
  value: string;
}

export const Text = React.forwardRef(function Text(
  {
    as = "span",
    noOfLines = 0,
    value,
    className,
    size = "inherit",
    variant = "body",
    ...rest
  }: TextProps,
  ref: React.ForwardedRef<HTMLSpanElement>,
) {
  const Tag = as;
  const props = useDebugEvents(rest);
  return (
    <Tag
      ref={ref}
      data-size={size}
      data-variant={variant}
      className={clsx("__text", noOfLines > 0 && styles.truncate, className)}
      style={noOfLines > 0 ? { "--brevity-line-clamp": noOfLines } : undefined}
      data-component="Text$Brevity"
      {...props}
    >
      {value}
    </Tag>
  );
});
Text[TooltipSymbol] = true;