import * as React from "react";
import { Popover as ReakitPopover } from "reakit/Popover";
import styled from "styled-components";
import { fadeAndScaleIn } from "~/styles/animations";

type Props = {
  children: React.ReactNode;
  tabIndex?: number;
  width?: number;
};

function Popover({ children, width = 380, ...rest }: Props) {
  return (
    <ReakitPopover {...rest}>
      <Contents width={width}>{children}</Contents>
    </ReakitPopover>
  );
}

const Contents = styled.div<{ width: number }>`
  animation: ${fadeAndScaleIn} 200ms ease;
  transform-origin: 75% 0;
  background: ${(props) => props.theme.menuBackground};
  border-radius: 6px;
  padding: 12px 24px;
  max-height: 50vh;
  overflow-y: scroll;
  width: ${(props) => props.width}px;
  box-shadow: ${(props) => props.theme.menuShadow};
`;

export default Popover;
