import { ComponentProps, useContext } from 'react';

import { MenuButton } from 'reakit/Menu';

import { DropdownContext } from './context';

export function DropdownButton({
  children,
  ...props
}: ComponentProps<typeof MenuButton>) {
  const state = useContext(DropdownContext);
  return (
    <MenuButton className="group focus:outline-none" {...state} {...props}>
      {children}
    </MenuButton>
  );
}