import React from 'react';
import { DropdownProvider } from './context';
import { DropdownContent, IDropdownContentProps } from './DropdownContent';
import { DropdownDivider } from './DropdownDivider';
import { DropdownMenu, IDropdownMenuProps } from './DropdownMenu';
import { DropdownMenuItem, IDropdownMenuItemProps } from './DropdownMenuItem';
import { DropdownToggle, IDropdownToggleProps } from './DropdownToggle';

export interface IDropdownSubComponents {
  Content: React.FC<IDropdownContentProps>;
  Divider: React.FC;
  Toggle: React.FC<IDropdownToggleProps>;
  Menu: React.FC<IDropdownMenuProps>;
  Item: React.FC<IDropdownMenuItemProps>;
}

export const Dropdown: React.FC & IDropdownSubComponents = (props) => {
  return <DropdownProvider>{props.children}</DropdownProvider>;
};
Dropdown.Content = DropdownContent;
Dropdown.Divider = DropdownDivider;
Dropdown.Toggle = DropdownToggle;
Dropdown.Menu = DropdownMenu;
Dropdown.Item = DropdownMenuItem;