"use client";
import * as BUI from "@base-ui/react";
import { useTheme } from "../theme/useTheme";
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
import { type ReactNode } from "react";
import { cn } from "tailwind-variants";

type TooltipPopupProps = {
  hideArrow?: boolean;
  side?: "top" | "bottom" | "left" | "right";
  children?: ReactNode;
};

export const TooltipPopup = (props: TooltipPopupProps) => {
  const { children, hideArrow = false, side } = props;
  const { themeCls } = useTheme();

  const tooltipPopupCls = cn(
    themeCls,
    itemSizeRecipe({ size: "xs", shape: "rounded" }),
    "tooltip-popup",
  );

  return (
    <BUI.Tooltip.Portal>
      <BUI.Tooltip.Positioner sideOffset={8} side={side}>
        <BUI.Tooltip.Popup className={tooltipPopupCls}>
          {!hideArrow && (
            <BUI.Tooltip.Arrow className="tooltip-arrow">
              <PopupArrowUpSvg />
            </BUI.Tooltip.Arrow>
          )}
          {children}
        </BUI.Tooltip.Popup>
      </BUI.Tooltip.Positioner>
    </BUI.Tooltip.Portal>
  );
};

const PopupArrowUpSvg = (props: React.SVGProps<SVGSVGElement>) => (
  <svg
    width="10"
    height="6"
    viewBox="0 0 10 6"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path d="M0 6 L5 0 L10 6 Z" className="tooltip-arrow-border" />

    <path d="M1 6 L5 1 L9 6 Z" fill="var(--base-bg)" />
  </svg>
);