"use client"

import { ReactNode, useState } from "react"

type TooltipProps = {
  content: ReactNode
  children: ReactNode
  tooltipClassName?: string
  width?: string | number
}

const Tooltip = ({ content, children, tooltipClassName, width }: TooltipProps) => {
  const [open, setOpen] = useState(false)

  return (
    <div
      className="relative inline-flex"
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      {children}
      <div
        className={`
          absolute z-20 bottom-full mb-1 left-1/2 -translate-x-1/2
          transform transition-all duration-200 ease-out
          ${open ? "opacity-100 translate-y-0" : "opacity-0 translate-y-1 pointer-events-none"}
        `}
      >
        <div
          className={`
            rounded text-xs px-3 py-2 shadow-lg
            whitespace-normal text-center
            ${tooltipClassName ?? "bg-[#020617] text-white"}
          `}
          style={width ? { width } : undefined}
        >
          {content}
        </div>
      </div>
    </div>
  )
}

export default Tooltip