import h from '../shared/h.js'
import idFromString from '../shared/id-from-string.js'

const SIZES = ['4xl', '3xl', '2xl', 'xl', 'lg', 'base']

export function Heading ({ _level = 1, _size, _align, id, children, ...props }) {
  const index = _size || _level
  const size = SIZES[index - 1]
  const alignClass = _align ? `text-${_align}` : ''

  return h(`h${_level}`, {
    ...props,
    children,
    className: `font-custom font-bold text-txc text-${size} ${alignClass}`,
    id: id || idFromString(children)
  })
}
