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

// src/components/code-playground/CodeEditor.tsx
import React, { useState } from 'react';
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card';
import { Play, Trash2 } from 'lucide-react';
import OutputDisplay from './OutputDisplay';

const CodeEditor = () => {
  const [code, setCode] = useState('');
  const [output, setOutput] = useState('');
  const [error, setError] = useState('');
  const [isRunning, setIsRunning] = useState(false);

  const handleRunCode = async () => {
    if (!code.trim()) return;

    setIsRunning(true);
    setError('');
    setOutput('');

    try {
      const response = await fetch('/api/execute-code', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code })
      });

      const data = await response.json();

      if (data.error) {
        setError(data.error);
      } else {
        setOutput(data.output);
      }
    } catch (err) {
      setError('Failed to execute code. Please try again.');
    } finally {
      setIsRunning(false);
    }
  };

  const handleClear = () => {
    setCode('');
    setOutput('');
    setError('');
  };

  return (
    <Card className="h-[600px] flex flex-col">
      <CardHeader>
        <CardTitle>Python Code Playground</CardTitle>
      </CardHeader>
      <CardContent className="flex-1 flex flex-col gap-4">
        <div className="flex-1 flex flex-col">
          <textarea
            value={code}
            onChange={(e) => setCode(e.target.value)}
            placeholder="Write your Python code here..."
            className="flex-1 p-4 font-mono text-sm border rounded-lg focus:ring-2
         
                     focus:ring-blue-500 focus:border-blue-500"
          />
        </div>

        <div className="flex gap-2">
          <button
            onClick={handleRunCode}
            disabled={isRunning}
            className="flex items-center gap-2 bg-blue-500 text-white px-4 py-2 
                     rounded hover:bg-blue-600 disabled:bg-blue-300"
          >
            <Play size={16} />
            {isRunning ? 'Running...' : 'Run Code'}
          </button>
          
          <button
            onClick={handleClear}
            className="flex items-center gap-2 bg-gray-500 text-white px-4 py-2 
                     rounded hover:bg-gray-600"
          >
            <Trash2 size={16} />
            Clear
          </button>
        </div>

        <OutputDisplay output={output} error={error} />
      </CardContent>
    </Card>
  );
};

export default CodeEditor;