import React from 'react';
import { Box } from '@mui/material';
import { Scatter } from 'react-chartjs-2';
import { registerChartJS, commonChartOptions } from './chartutils';

registerChartJS();

const ScatterChartComponent = () => {
  const data = {
    datasets: [
      {
        label: 'Scatter Dataset',
        data: [
          { x: 1, y: 1 },
          { x: 2, y: 3 },
          { x: 3, y: -2 },
          { x: 4, y: 4 },
          { x: 5, y: -3 },
        ],
        backgroundColor: 'rgba(255, 99, 132, 0.6)',
      },
    ],
  };

  const options = {
    ...commonChartOptions,
    plugins: {
      title: {
        display: true,
        text: 'Scatter Chart',
      },
    },
    scales: {
      x: { type: 'linear', position: 'bottom' },
    },
  };

  return (
    <Box sx={{ height: 400 }}>
      <Scatter data={data} options={options} />
    </Box>
  );
};

export default ScatterChartComponent;