import React from 'react';
import Icon from 'app/components/elements/Icon';
import { LinkWithDropdown } from 'react-foundation-components/lib/global/dropdown';
import VerticalMenu from 'app/components/elements/VerticalMenu';

const FoundationDropdownMenu = ({menu, icon, label, dropdownPosition, dropdownAlignment, className, onClick}) => {
    return (<LinkWithDropdown
        closeOnClickOutside
        dropdownClassName={className}
        dropdownPosition={dropdownPosition}
        dropdownAlignment={dropdownAlignment}
        dropdownContent={
          <VerticalMenu items={menu} />
                              }
        onClick={onClick}
    >
      <span className="FoundationDropdownMenu__label">
        {icon && <Icon name="share" className="space-right" />}{label}
        <Icon name="dropdown-arrow" />
      </span>
    </LinkWithDropdown>);
}

export default FoundationDropdownMenu;
