// /components/tooltip/tooltip.tsx
      
import React, { ReactNode } from "react";

interface TooltipProps {
  content: ReactNode; // Tooltip content, can be any React node (text, element, etc.)
  position?: "top" | "bottom" | "left" | "right"; // Position of the tooltip (default: 'top')
  children: ReactNode; // The element to which the tooltip is attached
}

const Tooltip: React.FC<TooltipProps> = ({
  content,
  position = "top",
  children,
}) => {
  const positionClasses = {
    top: "bottom-full mb-2 left-1/2 transform -translate-x-1/2",
    bottom: "top-full mt-2 left-1/2 transform -translate-x-1/2",
    left: "right-full mr-2 top-1/2 transform -translate-y-1/2",
    right: "left-full ml-2 top-1/2 transform -translate-y-1/2",
  };

  return (
    <div className="relative inline-block group">
      {children}
      <div
        className={`absolute min-w-[10rem] z-10 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-zinc-800 text-white text-sm px-2 py-2 rounded-md ${positionClasses[position]}`}
      >
        {content}
      </div>
    </div>
  );
};

export { Tooltip }