import React from "react";
import styled from "styled-components";

const Dropdown = styled.div`
  width: 100%;
  margin-bottom: 5px;
  position: relative;
  display: inline-block;
`

const DropdownButton = styled.div`
  text-align: center;
  padding: 4px;
  background-color: #555;
  color: #fff;
  font-weight: 600;
  cursor: pointer;

  ${Dropdown}:hover & {
    background-color: #333;
  }
`

const DropdownList = styled.div`
  display: none;
  position: absolute;
  background-color: #333;
  width: 100%;
  z-index: 1;

  ${Dropdown}:hover & {
    display: block;
  }
`

const DropdownItem = styled.div`
  padding: 12px 16px;
  display: block;
  cursor: pointer;

  &:hover {
    background-color: #555;
}
`

export default ({
  options,
  onChange,
  children,
}) => (
  <Dropdown>
    <DropdownButton>
      {children}
    </DropdownButton>
    <DropdownList>
      {
        Object.entries(options).map(([text, option]) => (
          <DropdownItem key={option} onClick={() => onChange(option)}>{text}</DropdownItem>
        ))
      }
    </DropdownList>
  </Dropdown>
);