import React from "react";
import { Typography as KendoTypography } from "@progress/kendo-react-common";
import { TypographyProps } from "./TypographyProps";

interface ExtendedTypographyProps extends TypographyProps {
  tag: keyof typeof KendoTypography;
}

const Typography: React.FC<ExtendedTypographyProps> = ({
  dataTestId,
  children,
  className,
  fontSize,
  fontWeight,
  id,
  margin,
  style,
  textAlign,
  textTransform,
  themeColor,
  tag,
}) => {
  const TagName = KendoTypography[tag];
  return (
    <div data-test-id={dataTestId}>
      <TagName
        className={className}
        fontSize={fontSize}
        fontWeight={fontWeight}
        id={id}
        margin={margin}
        style={style}
        textAlign={textAlign}
        textTransform={textTransform}
        themeColor={themeColor}
      >
        {children}
      </TagName>
    </div>
  );
};

export default Typography;