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

import { DropdownMenu } from 'radix-ui'

import { contentStyles } from './Dropdown.styles'

import { Divider } from './Divider'
import { Item } from './Item'

type DropdownProps = ComponentProps<typeof DropdownMenu.Root> &
	ComponentProps<typeof DropdownMenu.Content> & {
		trigger: ReactNode
		arrow?: boolean
	}

function Dropdown({
	trigger,
	arrow = true,
	sideOffset,
	alignOffset,
	align,
	children,
	className,
	...props
}: DropdownProps) {
	return (
		<DropdownMenu.Root {...props}>
			<DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>
			<DropdownMenu.Portal>
				<DropdownMenu.Content
					align={align}
					sideOffset={sideOffset}
					alignOffset={alignOffset}
					className={clsx(contentStyles, className)}
				>
					{children}
					{arrow && <DropdownMenu.Arrow />}
				</DropdownMenu.Content>
			</DropdownMenu.Portal>
		</DropdownMenu.Root>
	)
}

Dropdown.Item = Item
Dropdown.Divider = Divider

export { Dropdown }
