"use client"; // components/main/analogeEingaenge/AnalogInputsChart.tsx
import React from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

export default function AnalogInputsChart() {
  const analogInputs = useSelector(
    (state: RootState) => state.analogeEingaengeSlice
  );

  // Daten für das Diagramm vorbereiten
  const chartData = Object.values(analogInputs).map((input) => ({
    name: `Input ${input.id}`,
    value: input.value ?? 0, // Falls kein Wert vorhanden ist, wird 0 gesetzt
  }));

  return (
    <div className="w-full h-[350px] bg-white shadow-md rounded-lg p-4 border border-gray-200">
      <h3 className="text-sm font-semibold mb-2 text-gray-700">
        Analog Inputs Chart
      </h3>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          data={chartData}
          margin={{ top: 10, right: 20, left: 0, bottom: 10 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Line
            type="monotone"
            dataKey="value"
            stroke="#4A90E2"
            strokeWidth={2}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}