import type { ReactNode } from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';

type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
  children: ReactNode;
  content: ReactNode;
  alignContent?: 'start' | 'center' | 'end';
  disabled?: boolean;
  onOpenChange?: (open: boolean) => void;
};

export function DropdownMenuRoot({
  children,
  content,
  alignContent = 'start',
  disabled,
  onOpenChange,
  ...delegated
}: DropdownMenuRootProps) {
  return (
    <DropdownMenuPrimitive.Root onOpenChange={onOpenChange}>
      <DropdownMenuPrimitive.Trigger disabled={disabled} asChild>
        {children}
      </DropdownMenuPrimitive.Trigger>
      <DropdownMenuPrimitive.Content
        align={alignContent}
        sideOffset={5}
        className="c-dropdown-menu-content"
        {...delegated}
      >
        {content}
      </DropdownMenuPrimitive.Content>
    </DropdownMenuPrimitive.Root>
  );
}
