frontend/src/components/code-playground/OutputDisplay.tsx

// src/components/code-playground/OutputDisplay.tsx
import React from 'react';

const OutputDisplay = ({ output, error }) => (
  <div className="bg-gray-900 text-white p-4 rounded-lg h-48 overflow-auto">
    {error ? (
      <div className="text-red-400">
        <strong>Error:</strong>
        <pre className="mt-2 text-sm">{error}</pre>
      </div>
    ) : output ? (
      <pre className="text-sm">{output}</pre>
    ) : (
      <div className="text-gray-400 text-sm">Code output will appear here...</div>
    )}
  </div>
);

export default OutputDisplay;