import React from 'react';
import classNames from 'classnames';
import styles from './Menu.module.css';

export default function Menu({
  options = [],
  selectedOption,
  className,
  float,
  align = 'left',
  optionClassName,
  selectedClassName,
  onSelect = () => {},
}) {
  return (
    <div
      className={classNames(styles.menu, className, {
        [styles.float]: float,
        [styles.top]: float === 'top',
        [styles.bottom]: float === 'bottom',
        [styles.left]: align === 'left',
        [styles.right]: align === 'right',
      })}
    >
      {options.map(option => {
        const { label, value, className: customClassName, render } = option;

        return render ? (
          render(option)
        ) : (
          <div
            key={value}
            className={classNames(styles.option, optionClassName, customClassName, {
              [selectedClassName]: selectedOption === value,
            })}
            onClick={e => onSelect(value, e)}
          >
            {label}
          </div>
        );
      })}
    </div>
  );
}