import { Menu as BaseMenu } from '@base-ui/react/menu';
import * as stylex from '@stylexjs/stylex';

import type { ReactNode } from 'react';

import MoreIconWrapper from '~/src/components/Icon/MoreIcon';
import { menuStyles } from './styles';

export interface MenuOption {
  label: string;
  icon?: ReactNode;
  onClick: () => void;
}

interface MenuProps {
  options: MenuOption[];
  openOnHover?: boolean;
}

export const Menu = ({ options, openOnHover }: MenuProps) => {
  return (
    <BaseMenu.Root>
      <BaseMenu.Trigger
        {...stylex.props(menuStyles.button)}
        nativeButton={false}
        openOnHover={openOnHover}
        render={(props) => (
          <div {...props} role="button">
            <MoreIconWrapper direction="left" size={24} />
          </div>
        )}
      />

      <BaseMenu.Portal>
        <BaseMenu.Positioner
          {...stylex.props(menuStyles.positioner)}
          sideOffset={8}
          side="bottom"
        >
          <BaseMenu.Popup {...stylex.props(menuStyles.popup)}>
            {options.map((option) => (
              <BaseMenu.Item
                key={option.label}
                {...stylex.props(menuStyles.item)}
                onClick={option.onClick}
              >
                {option.icon} {option.label}
              </BaseMenu.Item>
            ))}
          </BaseMenu.Popup>
        </BaseMenu.Positioner>
      </BaseMenu.Portal>
    </BaseMenu.Root>
  );
};