function Graph2DPlotter() {
    const [equation, setEquation] = useState('x**2');
    const [xMin, setXMin] = useState('-10');
    const [xMax, setXMax] = useState('10');

    const plotGraph = () => {
        try {
            const xValues = [];
            const yValues = [];
            const min = parseFloat(xMin);
            const max = parseFloat(xMax);
            const step = (max - min) / 200;

            for (let x = min; x <= max; x += step) {
                try {
                    const y = eval(equation.replace(/x/g, `(${x})`));
                    if (isFinite(y)) {
                        xValues.push(x);
                        yValues.push(y);
                    }
                } catch (e) {
                    // Skip invalid points
                }
            }

            const trace = {
                x: xValues,
                y: yValues,
                type: 'scatter',
                mode: 'lines',
                line: { color: '#2563eb', width: 2 }
            };

            const layout = {
                title: `y = ${equation}`,
                xaxis: { title: 'x', gridcolor: '#e2e8f0' },
                yaxis: { title: 'y', gridcolor: '#e2e8f0' },
                plot_bgcolor: '#f8fafc',
                paper_bgcolor: '#ffffff',
            };

            Plotly.newPlot('graph2d-plot', [trace], layout, { responsive: true });
        } catch (error) {
            alert('Error plotting graph. Please check your equation.');
        }
    };

    return (
        <div className="card">
            <h3 style={{ marginBottom: '16px' }}>📈 2D Graph Plotter</h3>
            <p style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '16px' }}>
                Enter a mathematical expression using 'x' as variable. Examples: x**2, Math.sin(x), x**3 - 2*x
            </p>
            <div className="form-group">
                <label className="form-label">Equation (y =)</label>
                <input type="text" className="form-input" value={equation} onChange={(e) => setEquation(e.target.value)} placeholder="x**2" />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
                <div className="form-group">
                    <label className="form-label">X Min</label>
                    <input type="number" className="form-input" value={xMin} onChange={(e) => setXMin(e.target.value)} />
                </div>
                <div className="form-group">
                    <label className="form-label">X Max</label>
                    <input type="number" className="form-input" value={xMax} onChange={(e) => setXMax(e.target.value)} />
                </div>
            </div>
            <button className="btn btn-primary" onClick={plotGraph}>Plot Graph</button>
            <div id="graph2d-plot" style={{ marginTop: '20px', minHeight: '400px' }}></div>
        </div>
    );
}

// Export to global registry
window.Graph2DPlotter = Graph2DPlotter;