import React from 'react';
import styled from 'styled-components';
import Popover, { PopoverProps } from '@material-ui/core/Popover';

import { ThemeObject } from '../Theme';

export const StyledPopover = styled((props: PopoverProps & { $theme: ThemeObject }) => (
  <Popover
    // eslint-disable-next-line react/jsx-props-no-spreading
    {...props}
  />
))`
  .MuiPaper-root {
    padding: 10px;
    background-color: ${(props) => props.$theme.background.light};
    box-shadow: 0px 5px 15px 0px ${(props) => props.$theme.background.shadow};
    -webkit-box-shadow: 0px 5px 15px 0px ${(props) => props.$theme.background.shadow};
    -moz-box-shadow: 0px 5px 15px 0px ${(props) => props.$theme.background.shadow};
  }
`;
