Cacher is the code snippet organizer for pro developers

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

/**
 * I don't understand it cearly
 * check this link 
 * https://medium.freecodecamp.org/z-index-explained-how-to-stack-elements-using-css-7c5aa0f179b3
 * to figure out better idea of why
 */
const Base = styled.div`
  position: relative;
  z-index: 0;
`

const Cover = styled.div<{ cover: boolean }>`
  display: inline-block;
  background: #e3e3e3bb;
  z-index: ${props => props.cover ? 1 : 0};

  :hover{
    cursor: ${props => props.cover ? 'not-allowed' : 'auto'};
  }
`

const Content = styled.div<{ cover: boolean }>`
  z-index: ${props => props.cover ? -1 : 0};
  position: relative;
  :hover{
    cursor: ${props => props.cover ? 'not-allowed' : 'auto'};
  }
`

const Translucent: React.FC<{
  cover: boolean,
  handleClick: any,
  children: any
}> = (props) => (
  <Base>
    <Cover cover={props.cover}
      onClick={props.handleClick}>
      <Content cover={props.cover}>
        {props.children}
      </Content>
    </Cover>
  </Base>
)

export default Translucent