import {
  Tooltip as STooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { TooltipArrow } from "@radix-ui/react-tooltip";

export default function Tooltip({
  content,
  className,
  children,
  light,
  side,
  align,
  sideOffset,
  alignOffset,
}: TooltipProps) {
  return (
    <TooltipProvider>
      <STooltip delayDuration={300}>
        <TooltipTrigger asChild>{children}</TooltipTrigger>
        {content && (
          <TooltipContent
            className={cn(className, {
              "bg-white text-neutral-900 shadow": light,
            })}
            side={side}
            align={align}
            sideOffset={sideOffset}
            alignOffset={alignOffset}
          >
            <TooltipArrow
              className={cn({ "fill-white drop-shadow": light })}
              style={{
                textShadow: "0 0 1px black",
              }}
            />
            {content}
          </TooltipContent>
        )}
      </STooltip>
    </TooltipProvider>
  );
}