import React, { useMemo } from "react";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  LineElement,
  PointElement,
  CategoryScale,
  LinearScale,
  Tooltip,
  Legend,
} from "chart.js";

ChartJS.register(
  LineElement,
  PointElement,
  CategoryScale,
  LinearScale,
  Tooltip,
  Legend
);

const EnergyUsage = () => {
  const data = {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
    datasets: [
      {
        label: "Simulation 1",
        data: [400, 600, 450, 1000, 1000],
        borderColor: "#6a0dad",
        fill: false,
        tension: 0.5, // More curved line
        pointRadius: 0, // Remove point indicators
      },
      {
        label: "Simulation 2",
        data: [300, 500, 700, 950, 1100],
        borderColor: "#b19cd9",
        fill: false,
        tension: 0.5,
        pointRadius: 0,
      },
    ],
  };

  const options = useMemo(
    () => ({
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        title: {
          display: true,
        },
        legend: {
          display: false,
        },
      },
      scales: {
        x: {
          display: false, // Hide x-axis
          grid: {
            display: false,
          },
        },
        y: {
          display: false, // Hide y-axis
          grid: {
            display: false,
          },
        },
      },
    }),
    []
  );

  return (
    <div className="comparisionCard energy-usage">
      <div className="energy-usage-wrapper">
        <h4>Energy Usage</h4>
        <p className="value">
          2500 <span>kWh</span>
        </p>
      </div>

      <div className="simulation-details">
        <div className="simulation-wrapper sim-1">
          <div className="icon"></div>
          <div className="simulation-details-wrapper">
            <div className="label">Simulation 1</div>
            <div className="value">98%</div>
          </div>
        </div>
        <div className="simulation-wrapper sim-2">
          <div className="icon"></div>
          <div className="simulation-details-wrapper">
            <div className="label">Simulation 2</div>
            <div className="value">97%</div>
          </div>
        </div>
      </div>

      <div className="chart">
        <Line data={data} options={options} />
      </div>
    </div>
  );
};

export default EnergyUsage;