import React from 'react';
import { Menu as BaseMenu } from '@headlessui/react';

import { DropdownMenuButton } from './dropdown-menu-button';
import { DropdownMenuItem } from './dropdown-menu-item';
import { DropdownMenuItems } from './dropdown-menu-items';
import { DropdownMenuSeparator } from './dropdown-menu-separator';
import {
  DropdownMenuProvider,
  DropdownMenuProviderProps,
} from './dropdown-menu.context';

/*-- Types --*/

export interface DropdownMenuProps extends DropdownMenuProviderProps {}

/*-- Main --*/

export function DropdownMenu({ children, ...rest }: DropdownMenuProps) {
  return (
    <BaseMenu>
      {({ open }) => (
        <DropdownMenuProvider {...rest} open={open}>
          {children}
        </DropdownMenuProvider>
      )}
    </BaseMenu>
  );
}

DropdownMenu.Button = DropdownMenuButton;
DropdownMenu.Items = DropdownMenuItems;
DropdownMenu.Item = DropdownMenuItem;
DropdownMenu.Separator = DropdownMenuSeparator;