import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
import { DropdownMenu as RMenu } from 'radix-ui';

export const Menu = RMenu.Root;
export const MenuTrigger = RMenu.Trigger;

export const MenuContent = ({
  children,
  ...props
}: ComponentPropsWithoutRef<typeof RMenu.Content>) => (
  <RMenu.Portal>
    <RMenu.Content className="modern-sk-menu" sideOffset={6} {...props}>
      {children}
    </RMenu.Content>
  </RMenu.Portal>
);

export const MenuItem = ({
  icon,
  shortcut,
  children,
  ...props
}: ComponentPropsWithoutRef<typeof RMenu.Item> & {
  icon?: ReactNode;
  shortcut?: string;
}) => (
  <RMenu.Item className="modern-sk-menu-item" {...props}>
    {icon && <span className="ph">{icon}</span>}
    {children}
    {shortcut && <span className="sc">{shortcut}</span>}
  </RMenu.Item>
);

export const MenuSeparator = () => (
  <RMenu.Separator className="modern-sk-menu-sep" />
);

export const MenuSurface = ({ children }: { children: ReactNode }) => (
  <div className="modern-sk-menu">{children}</div>
);

export const MenuRow = ({
  icon,
  shortcut,
  children,
}: {
  icon?: ReactNode;
  shortcut?: string;
  children: ReactNode;
}) => (
  <div className="modern-sk-menu-item">
    {icon && <span className="ph">{icon}</span>}
    {children}
    {shortcut && <span className="sc">{shortcut}</span>}
  </div>
);