import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
import "./style.css";

const CSS_HANDLES = ["html"] as const;

type HtmlProps = {
  children?: ReactNode;
  /**
   * Qual tag Html que deseja que seja usar
   *
   * @default div
   */
  tag?: keyof React.ReactHTML;
  /**
   * Classes CSS extras que deseja adicionar.
   * Feito para uso de [classes do tachyons](https://tachyons.io/)
   */
  tachyonsClasses?: string;
  /**
   * Se caso quiser usar esse componente
   * para adicinar um texto simples
   */
  text?: string;
  /**
   * Tag ID para
   */
  testId?: string;
};

export const Html = ({
  children = null,
  tag = "div",
  text = "",
  tachyonsClasses: classes = "",
  testId,
}: HtmlProps) => {
  const { handles } = useCssHandles(CSS_HANDLES);

  const props = {
    className: `${handles.html} ${classes}`,
    "data-testid": testId,
  };
  const Children = (
    <>
      {children}
      {text}
    </>
  );
  const Element = React.createElement(tag, props, Children);

  return <>{Element}</>;
};