import { type ComponentProps } from 'react'

import { Slot } from 'radix-ui'

import { type RootStylesProps, rootStyles } from './Button.styles'

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

function Button({
	asChild = false,
	variant,
	size,
	color,
	block,
	className,
	...props
}: ButtonProps) {
	const Comp = asChild ? Slot.Root : 'button'

	return (
		<Comp
			className={rootStyles({ variant, size, color, block, className })}
			{...props}
		/>
	)
}

export { Button }
