'use client';

import * as React from 'react';
import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
import { cn } from '@/lib/utils';

const TooltipProvider = BaseTooltip.Provider;

function Tooltip({ ...props }: React.ComponentProps<typeof BaseTooltip.Root>) {
  return (
    <TooltipProvider delay={0}>
      <BaseTooltip.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
  );
}

const TooltipTrigger = BaseTooltip.Trigger;

function TooltipContent({
  className,
  sideOffset = 4,
  children,
  ...props
}: React.ComponentProps<typeof BaseTooltip.Popup> & { sideOffset?: number }) {
  return (
    <BaseTooltip.Portal>
      <BaseTooltip.Positioner sideOffset={sideOffset}>
        <BaseTooltip.Popup
          data-slot="tooltip-content"
          className={cn(
            // Spec source: Figma "APP Re-design Phase 1" → page "Tooltip ✅" (rad 12, pad 28x16)
            'z-50 w-fit rounded-xl border border-input bg-background px-7 py-4 text-sm text-foreground shadow-md',
            'data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 transition-opacity',
            className,
          )}
          {...props}
        >
          {children}
        </BaseTooltip.Popup>
      </BaseTooltip.Positioner>
    </BaseTooltip.Portal>
  );
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };