"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
  );

  const chartData = Object.values(analogInputs)
    .filter((input) => input?.id !== null && input?.id !== undefined)
    .map((input) => ({
      name: `Eingang ${input.id}`,
      Wert: input.value ?? 0,
    }));

  return (
    <div className="w-full h-[350px] bg-white shadow-md rounded-lg p-4 border border-gray-200">
      <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="Wert"
            stroke="#4A90E2"
            strokeWidth={2}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}