import * as React from 'react';
import styled from 'styled-components';

import { styledByMediaQuery } from '../utils/styles';
import Colors from '../Colors';
import Sizes from '../Sizes';

interface IProps {
  children: string|React.ReactNode;
}

const Tooltip = styled.div.attrs({
  className: 'tooltip',
})`
  font-size: ${ Sizes.s2}px;
  opacity: 0;
  background-color: ${ Colors.white};
  color: ${ Colors.codGray };
  border-radius: 4px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  transition: all 0.3s ease-in;
  filter: drop-shadow(0 2px 2px rgb(146, 146, 146));
  max-height: 80px;
  width: 100%;
  z-index: -1;
  display: none;

  ${styledByMediaQuery(`display: block;`)}

  &:before {
    content: '';
    position: inherit;
    left: -13px;
    top: 16px;
    border-top: 5px solid transparent;
    border-right: 13px solid white;
    border-bottom: 7px solid transparent;
  }
`;

export default React.memo(({children}: IProps) => (
  <Tooltip>{children}</Tooltip>
));