import React from 'react';
import { Line } from 'react-chartjs-2';
import { Box, Typography } from '@mui/material';
import '../style/Chart.css';

const ChartBox = () => {
  const data = {
    labels: ['Jan 01', 'Jan 02', 'Jan 03', 'Jan 04', 'Jan 05', 'Jan 06'],
    datasets: [
      {
        label: 'Cash In',
        data: [50, 75, 200, 125, 150, 175],
        backgroundColor: 'rgba(75,192,192,0.4)',
        borderColor: 'rgba(75,192,192,1)',
        fill: true, // No fill under the line
        tension: 0.5, // Line curve
      },
      {
        label: 'Cash Out',
        data: [100, 90, 80, 70, 60, 50],
        backgroundColor: 'rgba(255,99,132,0.4)',
        borderColor: 'rgba(255,99,132,1)',
        fill: true, // No fill under the line
        tension: 0.5, // Line curve
      },
    ],
  };

  return (
    <Box sx={{ padding: 2, backgroundColor: '#fff', borderRadius: 2, boxShadow: 1 }}>
      <Typography variant="h6" sx={{ marginBottom: 2 }}>
        Account Activities
      </Typography>
      <Line data={data} />
    </Box>
  );
};

export default ChartBox;