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

interface DropDownBoxProps {
  onMouseEnter: () => void;
  onMouseLeave: () => void;
  visible: boolean;
}

const Box = styled.div`
  background-color: ${colors.white};
  margin-top: 0.8rem;
  position: absolute;
  left: 0;
  top: 30px;
  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;