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

registerChartJS();

const FinancialChart = ({ data }) => {
  const defaultData = [
    { date: '2024-03-01', price: 120 },
    { date: '2024-03-02', price: 125 },
    { date: '2024-03-03', price: 130 },
    { date: '2024-03-04', price: 128 },
    { date: '2024-03-05', price: 135 },
  ];

  const stockData = data?.length > 0 ? data : defaultData;

  const chartData = {
    labels: stockData.map(item => item.date),
    datasets: [
      {
        label: 'Stock Price',
        data: stockData.map(item => item.price),
        borderColor: 'rgba(75, 192, 192, 1)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        fill: true,
      },
    ],
  };

  const options = {
    ...commonChartOptions,
    plugins: {
      title: {
        display: true,
        text: 'Financial Data Chart',
      },
      tooltip: {
        callbacks: {
          label: (tooltipItem) => `$${tooltipItem.raw.toFixed(2)}`,
        },
      },
    },
    scales: {
      x: {
        title: { display: true, text: 'Date' },
      },
      y: {
        title: { display: true, text: 'Price (USD)' },
        ticks: { callback: (value) => `$${value.toFixed(2)}` },
      },
    },
  };

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

export default FinancialChart;