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

registerChartJS();

const RadarChartComponent = () => {
  const data = {
    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
    datasets: [
      {
        label: 'Series A',
        data: [65, 59, 90, 81, 56, 55, 40],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
      },
      {
        label: 'Series B',
        data: [28, 48, 40, 19, 96, 27, 100],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)',
      },
    ],
  };

  const options = {
    ...commonChartOptions,
    plugins: {
      title: {
        display: true,
        text: 'Radar Chart',
      },
    },
  };

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

export default RadarChartComponent;