import * as React from "react"
import { Slot } from "radix-ui"

import { cn } from "../../lib/utils"

function TooltipProvider({ children }: { children: React.ReactNode }) {
  return children
}

function Tooltip({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="tooltip"
      className={cn("group/tooltip relative inline-flex", className)}
      {...props}
    />
  )
}

function TooltipTrigger({
  asChild: _asChild,
  ...props
}: React.ComponentProps<typeof Slot.Root> & { asChild?: boolean }) {
  void _asChild
  return <Slot.Root data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  align: _align,
  side = "top",
  sideOffset: _sideOffset,
  ...props
}: React.ComponentProps<"span"> & {
  side?: "top" | "right" | "bottom" | "left"
  sideOffset?: number
  align?: "start" | "center" | "end"
}) {
  void _align
  void _sideOffset
  return (
    <span
      role="tooltip"
      data-side={side}
      data-slot="tooltip-content"
      className={cn(
        "pointer-events-none absolute z-50 hidden w-max max-w-xs items-center gap-1.5 rounded-xl bg-foreground px-3 py-1.5 text-xs text-background group-hover/tooltip:inline-flex group-focus-within/tooltip:inline-flex",
        "data-[side=top]:bottom-full data-[side=top]:left-1/2 data-[side=top]:mb-2 data-[side=top]:-translate-x-1/2",
        "data-[side=bottom]:top-full data-[side=bottom]:left-1/2 data-[side=bottom]:mt-2 data-[side=bottom]:-translate-x-1/2",
        "data-[side=left]:end-full data-[side=left]:top-1/2 data-[side=left]:me-2 data-[side=left]:-translate-y-1/2",
        "data-[side=right]:start-full data-[side=right]:top-1/2 data-[side=right]:ms-2 data-[side=right]:-translate-y-1/2",
        className
      )}
      {...props}
    />
  )
}

export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }