import { forwardRef } from 'react';
import { cx } from 'class-variance-authority';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';

export type DropdownMenuItemProps = DropdownMenuPrimitive.DropdownMenuItemProps & {
  children: React.ReactNode;
  isSelected?: boolean;
};

export const DropdownMenuItem = forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.Item>, DropdownMenuItemProps>(
  ({ children, className, isSelected, ...delegated }, ref) => {
    return (
      <DropdownMenuPrimitive.Item
        ref={ref}
        {...delegated}
        className={cx('c-dropdown-menu-item', isSelected ? 'selected' : '', className)}
      >
        {children}
      </DropdownMenuPrimitive.Item>
    );
  },
);

DropdownMenuItem.displayName = 'DropdownMenuItem';
