import React from 'react';
import { Playground } from 'react-playground-editor';
import 'react-playground-editor/dist/index.css';

function App() {
  const initialFiles = {
    'src/App.jsx': `import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello React!</h1>
      <p>Start editing to see some magic happen!</p>
    </div>
  );
}

export default App;`,
    'src/index.js': `import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);`
  };

  return (
    <div style={{ height: '100vh' }}>
      <Playground
        initialFiles={initialFiles}
        defaultActiveFile="src/App.jsx"
        showFileExplorer={true}
        showTerminal={true}
        showWebView={true}
        showDependencies={true}
        theme="dark"
      />
    </div>
  );
}

export default App;

import React from 'react';
import { Playground, useFileStore } from 'react-playground-editor';
import 'react-playground-editor/dist/index.css';

function AdvancedPlayground() {
  const handleFileChange = (files) => {
    console.log('Files changed:', files);
    // Save files to localStorage, send to server, etc.
  };

  const handleActiveFileChange = (filePath) => {
    console.log('Active file changed:', filePath);
  };

  return (
    <div style={{ height: '100vh' }}>
      <Playground
        initialFiles={{
          'src/App.jsx': `import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ padding: '20px' }}>
      <h1>Counter App</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default App;`,
          'src/styles.css': `body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}`
        }}
        defaultActiveFile="src/App.jsx"
        showFileExplorer={true}
        showTerminal={true}
        showWebView={true}
        showDependencies={true}
        theme="dark"
        onFileChange={handleFileChange}
        onActiveFileChange={handleActiveFileChange}
        className="custom-playground"
        style={{ border: '1px solid #e5e7eb' }}
      />
    </div>
  );
}

export default AdvancedPlayground;

interface PlaygroundProps {
  // Initial files to load
  initialFiles?: Record<string, string>;
  
  // Default active file
  defaultActiveFile?: string;
  
  // Panel visibility controls
  showFileExplorer?: boolean;
  showTerminal?: boolean;
  showWebView?: boolean;
  showDependencies?: boolean;
  
  // Theme
  theme?: "dark" | "light";
  
  // Event handlers
  onFileChange?: (files: Record<string, string>) => void;
  onActiveFileChange?: (filePath: string) => void;
  
  // Styling
  className?: string;
  style?: React.CSSProperties;
}