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

import { Tooltip as RadixTooltip } from 'radix-ui'

import { arrowStyles, contentStyles } from './Tooltip.styles'

type TooltipProps = ComponentProps<typeof RadixTooltip.Root> &
	ComponentProps<typeof RadixTooltip.Content> & {
		title?: ReactNode
	}

function Tooltip({ title, children, className, ...props }: TooltipProps) {
	return (
		<RadixTooltip.Provider delayDuration={250}>
			<RadixTooltip.Root>
				<RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
				<RadixTooltip.Portal>
					<RadixTooltip.Content
						className={clsx(contentStyles, className)}
						{...props}
					>
						{title}
						<RadixTooltip.Arrow className={arrowStyles} />
					</RadixTooltip.Content>
				</RadixTooltip.Portal>
			</RadixTooltip.Root>
		</RadixTooltip.Provider>
	)
}

export { Tooltip }
