import React from "react";
import { FontVersion, textLevels, textStyle } from "../../../design-system/tokens";
import { Text } from "./Text.styled";
import { TextProps } from "./types";

export const TextTag: React.FC<TextProps> = (props): JSX.Element => {
  const {
    type = "P",
    themedColor,
    klId,
    color,
    year = FontVersion.VERSION_2022,
    ...attr
  } = props;

  const element = React.createElement(
    textStyle[textLevels[type || "P"]][year].htmlTag,
    {
      ...attr,
      "kl-id": klId,
    }
  );

  return element;
};

export { Text };