"use client";

import Image from "next/image";

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

type OxySpecifiedMarkProps = {
  className?: string;
  /** Larger hit target in Fields list. */
  size?: "sm" | "md";
  /** Optional formula — merges Oxy mark + help into one icon. */
  formula?: string;
  label?: string;
};

/** Favicon mark for columns Oxy defines / calculates (brand guidelines). */
export function OxySpecifiedMark({
  className,
  size = "sm",
  formula,
  label,
}: OxySpecifiedMarkProps) {
  const px = size === "md" ? 14 : 12;
  const aria = formula
    ? `Oxy-specified · formula for ${label ?? "column"}`
    : "Oxy-specified field";
  return (
    <TooltipProvider delayDuration={200}>
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            type="button"
            className={cn(
              "inline-flex shrink-0 items-center justify-center",
              className,
            )}
            aria-label={aria}
            onClick={(event) => event.stopPropagation()}
          >
            <Image
              src="/favicon-48.png"
              alt=""
              width={px}
              height={px}
              unoptimized
              className="select-none object-contain"
            />
          </button>
        </TooltipTrigger>
        <TooltipContent side="top" className="max-w-xs text-xs leading-relaxed">
          <p className="font-medium">Oxy-specified field</p>
          {formula ? <p className="mt-1 opacity-90">{formula}</p> : null}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}