'use client';

/** JSON block — thin chat wrapper around `JsonTree`. */

import { LazyJsonTree } from '../../../../data/JsonTree/lazy';
import type { JsonBlock } from '../../../types/block';
import type { BlockRendererProps } from './types';

export default function JsonBlockRenderer({ block, ctx }: BlockRendererProps<JsonBlock>) {
  // Compact appearance (block.mode === 'compact' or compact chat) → hide
  // the toolbar, collapse depth, drop the card frame. Full appearance →
  // hover-revealed toolbar + card.
  const mode = block.mode ?? (ctx.appearance === 'compact' ? 'compact' : 'full');
  const compact = mode !== 'full';
  // The outer card (radius / border / shadow) comes from the shared
  // `BLOCK_SURFACE`; the tree itself is unbordered with a little padding so
  // it doesn't sit flush against the frame.
  return (
    <div className="p-2">
      <LazyJsonTree
        data={block.data}
        toolbar={compact ? 'never' : 'auto'}
        bordered={false}
        defaultExpandedDepth={compact ? 1 : 2}
      />
    </div>
  );
}