import React, { forwardRef } from "react"
import { useMousePosition } from "../../hooks"
import { classNames } from "../../utils"
import { SlotProps } from "../Slot"

type Props = {
  initialX?: number
  initialY?: number
} & SlotProps<"div">

export const MouseAttached = forwardRef<HTMLDivElement, Props>(
  function MouseAttached(
    { style, className, initialX, initialY, ...rest },
    ref,
  ) {
    const { x, y } = useMousePosition({ initialX, initialY })

    return (
      <div
        className={classNames("fixed", className)}
        ref={ref}
        style={{ top: y, left: x, ...style }}
        {...rest}
      />
    )
  },
)