'use client';

import { useState } from 'react';
import type { SankeyRawData } from '@/app/lib/sankey/types';
import { useT } from './ContentProvider';
import { SankeyDiagram } from './SankeyDiagram';

/**
 * A chart whose figures came from the model's own text, so the app cannot check them against your data.
 * It is hidden until the user chooses to see it, and labelled "Unverified" when shown. Charts built from
 * SQL results the user ran are drawn directly by SqlBlock and never pass through here.
 */
export function UnverifiedChart({ data }: { data: SankeyRawData }) {
  const t = useT();
  const [shown, setShown] = useState(false);

  if (shown) return <SankeyDiagram data={data} unverified />;

  return (
    <div className="my-5 flex items-center justify-between gap-3 rounded-[10px] border border-warning/25 bg-warning/10 px-3.5 py-2.5 text-[14px] text-warning-ink">
      <span>{t('unverified.message')}</span>
      <button
        onClick={() => setShown(true)}
        className="shrink-0 cursor-pointer rounded-[7px] border border-edge bg-transparent px-2.5 py-[5px] text-[13px] text-muted transition-all"
      >
        {t('unverified.show')}
      </button>
    </div>
  );
}