import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

import Icon from '../../visuals/Icon';
import Menu from '../../controls/Menu/Menu';
import ArrowDownIcon from '../../visuals/Icon/svg/ic_keyboard_arrow_down.svg';

const LanguageMenu = ({ children, items, navigational, variant, className }) => {
  const componentClassName = classnames(
    'LanguageMenu',
    {
      [`LanguageMenu--${variant}`]: variant,
    },
    className
  );

  return (
    <Menu
      className={componentClassName}
      items={items}
      navigational={navigational}
      horizontalAlign="right"
      dimension="compact"
      variant="linkDark"
      position="top"
    >
      {children}
      <Icon icon={ArrowDownIcon} />
    </Menu>
  );
};

LanguageMenu.propTypes = {
  className: PropTypes.string,
  children: PropTypes.node.isRequired,
  items: PropTypes.array.isRequired,
  /** Determines if the menu will use the &lt;nav&gt; html tag. Use if the menu will contain ONLY links */
  navigational: PropTypes.bool,
  variant: PropTypes.oneOf(['light', 'dark']),
};

LanguageMenu.defaultProps = {
  className: null,
  navigational: false,
  variant: 'light',
};

export default LanguageMenu;