import React, { AllHTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";

export interface TextProps {
  /**
   * Html element that will be used as the main element.
   */
  html?:
    | "span"
    | "p"
    | "h1"
    | "h2"
    | "h3"
    | "h4"
    | "h5"
    | "h6"
    | "label"
    | "pre"
    | "address"
    | "blockquote"
    | "div"
    | "sub"
    | "sup";
}

/**
 * Primary UI component for text input
 */
const Text: React.FC<
  TextProps & AllHTMLAttributes<HTMLDivElement>
> = React.forwardRef((props, ref) => {
  const { title, className, children, html } = props;

  const elementProps = Object.assign({}, props);
  delete elementProps.html;
  delete elementProps.children;

  return React.createElement(
    html ? html : "span",
    {
      ...elementProps,
      className: `font-sans inline-block ${twMerge(className)}`,
      "aria-label": title,
      alt: title,
      ref: ref,
    },
    children
  );
});

Text.displayName = "Text";

export default Text;
