import React, { ComponentProps, forwardRef } from 'react';
import { paperClasses, Popover as MuiPopover } from '@mui/material';

import { SHAPE_CIRCULAR, SHAPE_SQUARE } from '@/mui/constants';

import type { ShapeProp } from '@/mui/types';

type Props = ComponentProps<typeof MuiPopover> & {
  shape?: ShapeProp;
};

const Popover = forwardRef<HTMLDivElement, Props>(({ shape, sx, ...rest }, ref) => (
  <MuiPopover
    ref={ref}
    {...rest}
    sx={{
      [`& .${paperClasses.root}`]: {
        ...(shape === SHAPE_SQUARE && {
          borderRadius: 0,
        }),
        ...(shape === SHAPE_CIRCULAR && {
          borderRadius: (theme) => theme.shape.borderRadiusCircular,
        }),
      },
      ...sx,
    }}
  />
));

Popover.displayName = 'Popover';

export default Popover;
