/**
 * SimpleToolCallBlock - Simple tool call display without copy button
 * Used in compact/tree views
 */

import { Typography } from 'antd';
import { ToolCall } from './prettyMessagesTypes';

const { Text } = Typography;

interface SimpleToolCallBlockProps {
  tool: ToolCall;
  compact?: boolean;
}

export function SimpleToolCallBlock({ tool, compact = false }: SimpleToolCallBlockProps) {
  return (
    <div
      style={{
        background: '#f8f9fa',
        border: '1px solid #e9ecef',
        borderRadius: 6,
        padding: compact ? '6px 10px' : '10px 14px',
        marginTop: 8,
        fontFamily: 'monospace',
        fontSize: 12,
        position: 'relative',
      }}
    >
      {/* Function badge */}
      <div
        style={{
          position: 'absolute',
          top: -8,
          left: 12,
          background: '#fff',
          padding: '0 6px',
          fontSize: 10,
          color: '#8c8c8c',
          border: '1px solid #e9ecef',
          borderRadius: 3,
        }}
      >
        function
      </div>

      <Text strong style={{ fontSize: 13, display: 'block', marginBottom: 6 }}>
        {tool.name}
      </Text>

      {Object.keys(tool.arguments).length > 0 && (
        <div>
          {Object.entries(tool.arguments).map(([key, value]) => (
            <div key={key} style={{ marginBottom: 2 }}>
              <Text type="secondary" style={{ fontSize: 12 }}>
                {key}:{' '}
              </Text>
              <Text style={{ fontSize: 12 }}>{JSON.stringify(value)}</Text>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}