'use client';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
import type { ProvenanceEntry } from '@/lib/types';
import { useEvidence } from './evidence-context';

/**
 * Trigger wrapper: renders its children as a subtle dotted-underline button that opens the evidence drawer for
 * `<slug>.<property>`. Server components can use it (it is a client leaf that only needs serialisable props).
 * `data-evidence` is the QA hook.
 */
export function Evidence({
  slug,
  property,
  value,
  display,
  unit,
  label,
  fallback,
  entity,
  children,
  className,
  title = 'Show evidence: source, tier, observation time, extractor',
}: {
  slug: string;
  property: string;
  value?: unknown;
  display?: string;
  unit?: string | null;
  label?: string;
  fallback?: ProvenanceEntry | null;
  entity?: { name?: string; entity_type?: string } | null;
  children: ReactNode;
  className?: string;
  title?: string;
}) {
  const { open } = useEvidence();
  return (
    <button
      type="button"
      className={cn('evidence', className)}
      data-evidence={`${slug}:${property}`}
      title={title}
      onClick={(e) => {
        e.stopPropagation();
        open({ slug, property, value, display, unit, label, fallback: fallback ?? null, entity: entity ?? null });
      }}
    >
      {children}
    </button>
  );
}