InfoTip

"use client";

import { Popover } from "@base-ui-components/react/popover";
import type * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { InformationCircleIcon } from "@/components/ledger/icons";
import {
  TOOLTIP_DELAY,
  TOOLTIP_MOTION,
  TOOLTIP_SURFACE,
  type TooltipAlign,
  type TooltipSide,
} from "@/components/ledger/tooltip";

export interface InfoTipProps {
  /** Names the affordance for screen readers: "About available balance". */
  about: string;
  align?: TooltipAlign;
  children: React.ReactNode;
  className?: string;
  /** An optional bolded first line. Use for a term; omit for a plain sentence. */
  label?: React.ReactNode;
  side?: TooltipSide;
  /** Replaces the ⓘ glyph — e.g. a warning triangle beside a broken state. */
  trigger?: React.ReactNode;
  triggerClassName?: string;
}

/**
 * The ⓘ. A Popover rather than a Tooltip because it opens on press, and a
 * 16px glyph carrying a 40px hit area because it is a target on a phone.
 */
export function InfoTip({
  label,
  children,
  about,
  side = "top",
  align = "center",
  trigger,
  className,
  triggerClassName,
}: InfoTipProps) {
  return (
    <Popover.Root>
      <Popover.Trigger
        aria-label={about}
        className={cn(
          "relative inline-grid size-4 shrink-0 place-items-center rounded-full align-[-2px]",
          "text-text-tertiary transition-colors duration-1 ease-standard",
          "after:absolute after:inset-[-12px] after:content-['']",
          "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--accent)]",
          "hover:text-text-secondary",
          "data-[popup-open]:text-text-secondary",
          triggerClassName,
        )}
        delay={TOOLTIP_DELAY}
        openOnHover
      >
        {trigger ?? <InformationCircleIcon aria-hidden="true" className="size-4" />}
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner align={align} className="z-tooltip" side={side} sideOffset={8}>
          <Popover.Popup className={cn(TOOLTIP_SURFACE, TOOLTIP_MOTION, "outline-none", className)}>
            {label ? <p className="mb-1 font-medium text-text-primary">{label}</p> : null}
            <div className="text-text-secondary">{children}</div>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}