import clsx from 'clsx'
import React from 'react'

export function Heading({ as = 'h1', size = 'xl', className, children }) {
  const sizes = { lg: 'text-lg lg:text-xl', xl: 'text-xl lg:text-2xl' }
  return React.createElement(
    as,
    { className: clsx('font-semibold', sizes?.[size], className) },
    children,
  )
}