import React from 'react';
import { Bar } from 'react-chartjs-2';

function RiaSecChart({ riaSecScores }) {
  const chartData = {
    labels: riaSecScores.map(score => score.area),
    datasets: [
      {
        label: 'RIASEC Scores',
        data: riaSecScores.map(score => score.score),
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1,
      },
    ],
  };

  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'RIASEC Results',
      },
      legend: {
        position: 'top',
      },
    },
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  };

  return (
    <div className="riasec-scores">
      <h2>RIASEC Scores</h2>
      <Bar data={chartData} options={options} />
    </div>
  );
}

export default RiaSecChart;