"use client";

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

interface TooltipAppProps {
  children: React.ReactNode;
  content: React.ReactNode;
  side?: "top" | "right" | "bottom" | "left";
  align?: "start" | "center" | "end";
}

/**
 * Tooltip siap pakai — sudah termasuk Provider.
 * Cukup wrap element dan beri content.
 *
 * @example
 * <TooltipApp content="Hapus item">
 *   <Button variant="ghost" size="icon"><Trash2 /></Button>
 * </TooltipApp>
 */
export function TooltipApp({
  children,
  content,
  side = "top",
  align = "center",
}: TooltipAppProps) {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>{children}</TooltipTrigger>
        <TooltipContent side={side} align={align}>
          {content}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

/**
 * Provider global — letakkan di root layout.
 * Semua Tooltip di dalamnya akan bekerja.
 */
export { TooltipProvider as TooltipProviderApp } from "@/components/ui/tooltip";