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

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

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

import { PricePopoverProps } from "@/types/components/hotelReservation/selectRate/pricePopover"

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>
  )
}