import type { ReactNode } from 'react';

import { DropdownMenu } from '../dropdown-menu';
import { Item } from './action-item';
import { Separator } from './action-item-separator';

type ActionMenuProps = {
  children: ReactNode;
  tabIndex?: number;
};

export function ActionMenu({ children, tabIndex }: ActionMenuProps) {
  return (
    <DropdownMenu.Root content={children} alignContent="center">
      <button tabIndex={tabIndex} type="button" className="c-action-menu" aria-label="more options">
        <span className="sr-only">Open more options</span>
        <span className="c-action-menu-dot"></span>
        <span className="c-action-menu-dot"></span>
        <span className="c-action-menu-dot"></span>
      </button>
    </DropdownMenu.Root>
  );
}

ActionMenu.Item = Item;
ActionMenu.Separator = Separator;
