components/CodePanel.js

import CopyCodeButton from './CopyCodeButton';

export default function CodePanel({ modelResponse, generatedCode }) {
  return (
    <div 
      className="w-full max-w-[500px] lg:max-w-none lg:w-[500px] bg-gray-100 p-4 rounded-[26px] overflow-auto opacity-0 animate-fadeIn relative" 
      style={{ 
        height: 'min(calc(782px), 90vh)',
        animation: 'fadeIn 0.5s ease-in-out forwards'
      }}
    >
      <pre 
        className="text-sm whitespace-pre-wrap break-words font-mono h-full"
        style={{ 
          fontFamily: 'Menlo, Monaco, Consolas, monospace',
          padding: '16px',
          overflowY: 'auto'
        }}
      >
        {modelResponse && (
          <>
            <span className="font-semibold">Model Reasoning:</span>
            {'\n' + modelResponse + '\n\n\n'}
          </>
        )}
        <span className="font-semibold">Code:</span>
        {'\n' + generatedCode}
      </pre>
      <CopyCodeButton code={generatedCode} />
    </div>
  );
}