import React from 'react';
import { ScrollView, Text, View } from 'react-native';

import { toolWidgetStyles } from './toolWidgetStyles';

/**
 * RN-safe stand-in for the web's syntax-highlighted <pre> blocks. Nested
 * ScrollViews (same pattern as the timeline's ToolDetailBox) keep long code
 * reachable without breaking the outer chat scroll.
 */
export function CodeBlock({ code, variant = 'default' }: { code: string; variant?: 'default' | 'error' }) {
  const isError = variant === 'error';
  return (
    <View style={[toolWidgetStyles.codeBlock, isError ? toolWidgetStyles.codeBlockError : null]}>
      <ScrollView
        nestedScrollEnabled
        showsVerticalScrollIndicator
        style={toolWidgetStyles.codeBlockVerticalScroll}
      >
        <ScrollView
          horizontal
          nestedScrollEnabled
          showsHorizontalScrollIndicator
          contentContainerStyle={toolWidgetStyles.codeBlockContent}
          style={toolWidgetStyles.codeBlockHorizontalScroll}
        >
          <Text style={[toolWidgetStyles.codeBlockText, isError ? toolWidgetStyles.codeBlockErrorText : null]}>
            {code}
          </Text>
        </ScrollView>
      </ScrollView>
    </View>
  );
}