import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { white, gray } from '@bufferapp/ui/style/colors';

const Container = styled.div`
  z-index: 2;
  display: none;
  position: absolute;
  width: 100%;
  top: 2.25rem;
  background: ${white};
  border: 1px solid ${gray};
  border-width: 0 1px 1px;
  border-radius: 3;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);

  ${props => props.isOpen && css`
    display: block;
  `}
`;

const Dropdown = ({ isOpen, children }) => (
  <Container isOpen={isOpen}>
    {children}
  </Container>
);

Dropdown.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
};

export default Dropdown;