'use client';

/** Diff block — thin chat wrapper around the lazy `DiffViewer`. */

import { LazyDiffViewer } from '../../../../dev/code/DiffViewer/lazy';
import type { DiffBlock } from '../../../types/block';
import type { BlockRendererProps } from './types';

export default function DiffBlockRenderer({ block, ctx }: BlockRendererProps<DiffBlock>) {
  // Compact chat is narrow → default to single-column `unified`; full
  // bubbles have room for `split`. A pinned `layout` always wins.
  const layout = block.layout ?? (ctx.appearance === 'compact' ? 'unified' : 'split');
  const common = {
    layout,
    language: block.language,
    // `diff` is a "bare" block (no clipping card) because the viewer draws
    // its own bordered panel + a floating copy button that a clip would
    // crop. So it owns its frame — re-rounded to the shared 2xl radius.
    // `!`-utilities win over the viewer's template-string `rounded-xl`
    // regardless of stylesheet order.
    className: '!rounded-2xl',
    // Chat-only height policy: a tall diff must not swallow the transcript.
    // Cap at the SAME 480px the viewer's virtualized (>100-line) path already
    // uses, so every chat diff scrolls identically regardless of size. The
    // viewer itself stays uncapped — documentation embeds expect it to grow
    // with content. Inline style (not a class) so it wins without depending
    // on tailwind-merge conflict resolution against the viewer's own
    // `overflow-hidden`.
    style: { maxHeight: 480, overflowY: 'auto' } as const,
  };

  return block.patch !== undefined ? (
    <LazyDiffViewer {...common} patch={block.patch} />
  ) : (
    <LazyDiffViewer {...common} oldCode={block.oldCode ?? ''} newCode={block.newCode ?? ''} />
  );
}
