"use client"

import { Children, cloneElement, PropsWithChildren } from "react"
import { Dialog, DialogTrigger, Modal } from "react-aria-components"

import { SidePeekProps } from "./types"

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

export default function SidePeek({
  children,
  onClose,
  activeContent,
}: PropsWithChildren<SidePeekProps>) {
  return (
    <DialogTrigger>
      <Modal
        className={styles.sidePeek}
        isOpen={!!activeContent}
        onOpenChange={onClose}
      >
        <Dialog className={styles.dialog}>
          {({ close }) => (
            <>
              {Children.map(children, (child) => {
                return cloneElement(child as React.ReactElement, {
                  onClose: close,
                })
              })}
            </>
          )}
        </Dialog>
      </Modal>
    </DialogTrigger>
  )
}