import React, { type ReactElement } from 'react'
import * as Popover from '@radix-ui/react-popover'
import { Cross2Icon } from '@radix-ui/react-icons'

interface IPopoverProps {
  trigger: ReactElement | string
  content: ReactElement | string
  closeButton?: ReactElement | false
}

const PopoverWrapper = ({ trigger, content, closeButton = <Cross2Icon /> }: IPopoverProps): ReactElement => (
    <Popover.Root onOpenChange={(e) => {
      console.log(e)
    }}>
        <Popover.Trigger asChild>
            {trigger}
        </Popover.Trigger>
        <Popover.Portal>
            <Popover.Content
                className="rounded p-5 min-w-[300px] bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
                sideOffset={5}
                style={{ zIndex: 200 }}
            >
                <>{content}</>
                {
                    closeButton && (

                        <Popover.Close
                            className="h-[25px] w-[25px] inline-flex items-center justify-center text-violet11 absolute top-[5px] right-[5px]  cursor-pointer"
                            aria-label="Close"
                        >
                            {closeButton}
                        </Popover.Close>
                    )
                }
                <Popover.Arrow className="fill-white" />
            </Popover.Content>
        </Popover.Portal>
    </Popover.Root>
)

export default PopoverWrapper
