import { type ComponentProps } from 'react'

import { RootStylesProps, rootStyles } from './Title.styles'

type TitleProps = ComponentProps<'h1'> & RootStylesProps

function Title({ level = 1, className, ...props }: TitleProps) {
	const titleLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const

	const Comp = titleLevels[level! - 1]

	return <Comp className={rootStyles({ level, className })} {...props} />
}

export { Title }
