import React from "react";
import styled from "styled-components";
import colors from "@theme/colors";

interface DropDownBoxProps {
  onMouseEnter: () => void;
  onMouseLeave: () => void;
  visible: boolean;
  children: React.ReactNode;
}

const Box = styled.div`
  background-color: ${colors.white};
  border: 1px solid ${colors.black};
  position: absolute;
  /* margin-top: 0.8rem; hides cool onhover effect but fixes a gap problem */
  left: 0;
  top: 2.5rem;
  z-index: 20;

  a {
    text-decoration: underline;
    color: ${colors.darkBlue} !important;
    text-transform: uppercase;
  }
`;

const DropDownBox: React.FC<DropDownBoxProps> = ({
  children, onMouseEnter, onMouseLeave, visible,
}) => (
  <Box
    onMouseEnter={onMouseEnter}
    onMouseLeave={onMouseLeave}
    hidden={!visible}
  >
    {children}
  </Box>
);

export default DropDownBox;