"use client"; //components/main/uebersicht/NetworkInfo.tsx
import React from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store";

const NetworkInfo: React.FC = () => {
  // Werte direkt aus Redux holen
  const ip =
    useSelector((state: RootState) => state.variables.ip) || "Unbekannt";
  const subnet =
    useSelector((state: RootState) => state.variables.subnet) || "Unbekannt";
  const gateway =
    useSelector((state: RootState) => state.variables.gateway) || "Unbekannt";
  const opcUaZustand =
    useSelector((state: RootState) => state.variables.opcUaZustand) ||
    "Unbekannt";
  const opcUaNodesetName =
    useSelector((state: RootState) => state.variables.opcUaNodesetName) ||
    "Unbekannt";

  return (
    <div className="w-full flex-grow flex">
      <div className=" flex-grow flex justify-between items-center mt-1 bg-white p-2 rounded-lg shadow-md border border-gray-200 laptop:m-0 laptop:scale-y-75">
        <div className="flex items-center space-x-4">
          <img src="/images/IP-icon.svg" alt="IP Address" className="w-6" />
          <div>
            <p className="text-xs text-gray-500">IP-Adresse</p>
            <p className="text-sm font-medium text-gray-700">{ip}</p>
          </div>
        </div>

        <div className="flex items-center space-x-4">
          <img
            src="/images/subnet-mask.svg"
            alt="subnet mask"
            className="w-6"
          />
          <div>
            <p className="text-xs text-gray-500">Subnet-Maske</p>
            <p className="text-sm font-medium text-gray-700">{subnet}</p>
          </div>
        </div>

        <div className="flex items-center space-x-4">
          <img src="/images/gateway.svg" alt="gateway" className="w-6" />
          <div>
            <p className="text-xs text-gray-500">Gateway</p>
            <p className="text-sm font-medium text-gray-700">{gateway}</p>
          </div>
        </div>

        <div className="flex items-center space-x-4">
          <div className="text-xs font-bold text-blue-600">OPC-UA</div>
          <div>
            <p className="text-xs text-gray-500">Status</p>
            <p className="text-sm font-medium text-gray-700">{opcUaZustand}</p>
          </div>
        </div>

        <div className="flex items-center space-x-4">
          <div>
            <p className="text-xs text-gray-500">Nodeset Name</p>
            <p className="text-sm font-medium text-gray-700">
              {opcUaNodesetName}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default NetworkInfo;