import React from 'react';
import { ScatterChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Scatter, ResponsiveContainer } from 'recharts';

const ScatterChartComponent = ({ chartData, metricName, metricType, colors }) => {
    return (
        <div>
            <h2>{metricName} ({metricType})</h2>
            <ResponsiveContainer width="100%" height={400}>
                <ScatterChart>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="time" />
                    <YAxis dataKey="value" />
                    <Tooltip />
                    <Legend />
                    {Object.keys(chartData).map((instance, index) => (
                        <Scatter
                            key={instance}
                            data={chartData[instance]}
                            name={instance}
                            fill={colors[index % colors.length]}
                        />
                    ))}
                </ScatterChart>
            </ResponsiveContainer>
        </div>
    );
};

export default ScatterChartComponent;