// src/components/content/content-dot.tsx — tri-state analysis indicator with tooltip.
"use client";

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

const COLOR = {
  ok: "bg-green-500",
  partial: "bg-amber-500",
  none: "bg-red-500",
} as const;

const STATE_LABEL = {
  ok: "Complet",
  partial: "Partiel",
  none: "Absent",
} as const;

export function ContentDot({
  state,
  tooltip,
}: {
  state: "ok" | "partial" | "none";
  tooltip: ReactNode;
}) {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <span
            role="img"
            aria-label={STATE_LABEL[state]}
            className={`inline-block h-2.5 w-2.5 rounded-full ${COLOR[state]}`}
          />
        </TooltipTrigger>
        <TooltipContent className="max-w-xs">{tooltip}</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}