import clsx from 'clsx'
import { type ComponentProps } from 'react'

import { Slot } from 'radix-ui'

import { rootStyles } from './Button.styles'

type HeaderButtonProps = ComponentProps<'button'> & { asChild?: boolean }

function HeaderButton({
	asChild = false,
	className,
	...props
}: HeaderButtonProps) {
	const Comp = asChild ? Slot.Root : 'button'

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

export { HeaderButton }
