client/src/components/CodeEditor.tsx

import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Copy, Download, Play } from "lucide-react";
import { toast } from "sonner";

interface CodeEditorProps {
  code: string;
  language?: string;
  onChange?: (code: string) => void;
  onRun?: () => void;
}

export function CodeEditor({ code, language = "python", onChange, onRun }: CodeEditorProps) {
  const copyToClipboard = () => {
    navigator.clipboard.writeText(code);
    toast.success("Code copied to clipboard!");
  };

  return (
    <Card className="bg-gray-900 border-green-500/20 overflow-hidden">
      <CardHeader className="bg-black/40 border-b border-green-500/10 py-2 px-4 flex flex-row justify-between items-center">
        <CardTitle className="text-xs font-mono text-gray-400 uppercase tracking-widest">
          {language} Editor
        </CardTitle>
        <div className="flex gap-2">
          <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-400 hover:text-green-400" onClick={copyToClipboard}>
            <Copy size={14} />
          </Button>
          <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-400 hover:text-cyan-400">
            <Download size={14} />
          </Button>
          {onRun && (
            <Button variant="ghost" size="icon" className="h-8 w-8 text-green-500 hover:text-green-400" onClick={onRun}>
              <Play size={14} />
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent className="p-0">
        <textarea
          value={code}
          onChange={(e) => onChange?.(e.target.value)}
          className="w-full h-96 bg-black text-green-400 font-mono text-sm p-4 focus:outline-none resize-none"
          spellCheck={false}
        />
      </CardContent>
    </Card>
  );
}