import { DropdownMenu as RadixDropdownMenu } from '@radix-ui/themes';
import { forwardRef, useMemo } from 'react';

type ContentProps = RadixDropdownMenu.ContentProps & {
  isNavigation?: boolean;
};

const Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {
  const { isNavigation, className, ...rest } = props;
  const contentClassName = useMemo(() => {
    const cls = isNavigation ? 'dropdown-navigation' : '';
    return [cls, className].join(' ');
  }, [isNavigation, className]);

  return (
    <RadixDropdownMenu.Content
      ref={ref}
      {...rest}
      className={contentClassName}
    />
  );
});

Content.displayName = 'DropdownMenu.Content';

export const DropdownMenu = {
  ...RadixDropdownMenu,
  Content,
};
