import {
  Button,
  Dialog,
  OverlayArrow,
  Popover,
  type PopoverProps,
} from "react-aria-components"

import { CloseIcon } from "@/components/Icons"

import styles from "./popover.module.css"

interface PricePopoverProps extends Omit<PopoverProps, "children"> {
  children: React.ReactNode
}

export default function PricePopover({
  children,
  ...props
}: PricePopoverProps) {
  return (
    <Popover {...props}>
      <OverlayArrow className={styles.arrow}>
        <svg
          width="12"
          height="12"
          viewBox="0 0 12 12"
          style={{ display: "block", transform: "rotate(180deg)" }}
        >
          <path d="M0 0L6 6L12 0" fill="white" />
        </svg>
      </OverlayArrow>
      <Dialog>
        <Button
          onPress={() => props.onOpenChange?.(false)}
          className={styles.closeButton}
        >
          <CloseIcon className={styles.closeIcon} />
        </Button>
        {children}
      </Dialog>
    </Popover>
  )
}