import React, { ReactNode } from 'react'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['html'] as const

import './style.css'

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}</>
}