import { ArrowRight } from 'lucide-react';
import type { ToolCallView } from '@/lib/types';
import { fmtNum } from '@/lib/format';

export function UnitConvertCard({ call }: { call: ToolCallView }) {
  const p = call.payload as { value?: number; from?: string; to?: string; result?: number; factor?: number; formula?: string; kind?: string };
  if (p.result === undefined) return <p className="text-sm text-neutral-muted">{call.summary}</p>;
  return (
    <div className="flex flex-wrap items-center gap-3 text-sm">
      <span className="rounded-xl bg-neutral-surface px-3 py-2 font-semibold tabular-nums">{fmtNum(p.value ?? 0, 4)} <span className="text-neutral-muted font-normal">{p.from}</span></span>
      <ArrowRight size={16} className="text-neutral-muted" />
      <span className="rounded-xl bg-uqo-blue-light px-3 py-2 font-semibold tabular-nums text-uqo-blue-dark">{fmtNum(p.result, 4)} <span className="text-neutral-muted font-normal">{p.to}</span></span>
      <span className="text-xs text-neutral-muted">facteur {fmtNum(p.factor ?? 0, 6)} · {p.kind}</span>
    </div>
  );
}