"use client";

import { Info } from "lucide-react";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const TOOLTIP_TEXT =
  "This is the number of extracted verse entries from Śrīla Prabhupāda's original translations and purports. Some consecutive verses are merged into a single entry (e.g. Texts 16–18), so the actual verse count in the original manuscript may differ.";

export function ExtractedVerseCount({
  count,
  label = "verses",
  className = "",
}: {
  count: number;
  label?: string;
  className?: string;
}) {
  return (
    <span className={`inline-flex items-center gap-1 ${className}`}>
      <span>
        {count.toLocaleString()} {label}
      </span>
      <Tooltip>
        <TooltipTrigger
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
          }}
          className="inline-flex items-center justify-center opacity-50 hover:opacity-80 transition-opacity"
          aria-label="About verse count"
        >
          <Info className="size-3.5" />
        </TooltipTrigger>
        <TooltipContent side="top" className="max-w-xs text-pretty">
          {TOOLTIP_TEXT}
        </TooltipContent>
      </Tooltip>
    </span>
  );
}