/*
  POPOVER

  notes
    - Headless UI import is bigger, but it's for the __whole library__
    - Radix UI seems to have a bug on mobile

  patterns
    - Radix UI - https://radix-ui.com/primitives/docs/components/popover
    - Headless UI - https://headlessui.dev/react/popover
 */

import React from 'react';
import { makeBox } from '@rasahq/react-tabula/system';
import { m, AnimatePresence } from 'framer-motion';
import { Popover as HeadlessPopover } from '@headlessui/react';

const MDiv = makeBox('MDiv', { as: m.div });
const MButton = makeBox('MButton', { as: m.button });

export function Popover({ buttonText, buttonProps, ...restProps }) {
  return (
    <HeadlessPopover>
      {({ open }) => {
        return (
          <>
            <HeadlessPopover.Button as={MButton} className="popover-button" {...buttonProps}>
              {buttonText}
            </HeadlessPopover.Button>
            <AnimatePresence>
              {open && (
                <HeadlessPopover.Panel
                  as={MDiv}
                  className="popover-panel"
                  static
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.2 }}
                  {...restProps}
                />
              )}
            </AnimatePresence>
          </>
        );
      }}
    </HeadlessPopover>
  );
}