import * as React from 'react';
import styled from '@emotion/styled';
import { Popover, PopoverProps } from '@lightspeed/flame/Popover';
import { themeGet } from '@styled-system/theme-get';

const StyledPopover = styled(Popover)`
  right: ${themeGet('space.4')};
  margin-top: 0 !important;
  overflow: hidden;
  border-radius: ${themeGet('radii.radius-1')};
  z-index: 1;
`;

const AccountDropdown: React.FC<PopoverProps> = props => (
  <StyledPopover isFlipEnabled={false} noArrow {...props} />
);

export default AccountDropdown;