import * as React from 'react'
import { cn } from '../lib/cn'

export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
  level?: 1 | 2 | 3
}

const levelTag: Record<NonNullable<HeadingProps['level']>, 'h1' | 'h2' | 'h3'> = {
  1: 'h1',
  2: 'h2',
  3: 'h3',
}

const levelClass: Record<NonNullable<HeadingProps['level']>, string> = {
  1: 'text-title-1 font-medium text-ink',
  2: 'text-title-2 font-medium text-ink',
  3: 'text-title-3 font-medium text-ink',
}

export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
  ({ level = 2, className, children, ...props }, ref) => {
    const Tag = levelTag[level]
    return (
      <Tag ref={ref} className={cn(levelClass[level], className)} {...props}>
        {children}
      </Tag>
    )
  },
)
Heading.displayName = 'Heading'