import { createElement, FC, HTMLAttributes, PropsWithChildren } from 'react'
import cx from 'classnames'
import typography from '../../styles/typography.module.css'

interface Props extends HTMLAttributes<HTMLSpanElement & HTMLHeadingElement> {
  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span'
  type: 'pageTitle' | 'section' | 'subsection'
  className?: string
}

export const Heading: FC<PropsWithChildren<Props>> = ({
  tag,
  type,
  className,
  children,
  ...rest
}) => {
  const TAG: Record<Props['type'], Exclude<Props['tag'], undefined>> = {
    pageTitle: 'h1',
    section: 'h2',
    subsection: 'h3'
  }
  return createElement(
    tag ?? TAG[type],
    {
      className: cx(className, {
        [typography.displayLarge]: type === 'pageTitle',
        [typography.headlineMedium]: type === 'section',
        [typography.titleLarge]: type === 'subsection'
      }),
      ...rest
    },
    children
  )
}