"use client"; // components/modules/AnalogeEingaengeComponent.tsx
import React, { useState } from "react";
import { Icon } from "@iconify/react";
import { analogInputs } from "../../data/mockdata/analogInputs";

const AnalogeEingaengeComponent = () => {
  const [activeConfig, setActiveConfig] = useState<number | null>(null);

  return (
    <div className="border rounded-lg shadow-md laptop:p-4 p-6 bg-white flex flex-col h-full">
      <h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
      <div className="overflow-auto flex-grow">
        <table className="table-auto w-full h-full text-sm text-left border-collapse">
          <thead className="bg-gray-100 text-gray-700">
            <tr>
              <th className="px-2 py-1 whitespace-nowrap">Eingang</th>
              <th className="px-2 py-1 whitespace-nowrap">Wert</th>
              <th className="px-2 py-1 whitespace-nowrap">Bezeichnung</th>
              <th className="px-2 py-1 text-center whitespace-nowrap">uW</th>
              <th className="px-2 py-1 text-center whitespace-nowrap">uG</th>
              <th className="px-2 py-1 text-center whitespace-nowrap">oW</th>
              <th className="px-2 py-1 text-center whitespace-nowrap">oG</th>
              <th className="px-2 py-1 text-center whitespace-nowrap">
                Aktion
              </th>
            </tr>
          </thead>
          <tbody className="text-xs text-gray-600">
            {analogInputs.map((input) => (
              <tr key={input.id} className="border-t ">
                <td className="px-2 py-1">{input.id}</td>
                <td className="px-2 py-1">{input.value}</td>
                <td className="px-2 py-1">{input.name}</td>
                <td className="px-2 py-1 text-center">
                  <span
                    className={input.uW ? "text-green-500" : "text-gray-400"}
                  >
                    ●
                  </span>
                </td>
                <td className="px-2 py-1 text-center">
                  <span
                    className={input.uG ? "text-green-500" : "text-gray-400"}
                  >
                    ●
                  </span>
                </td>
                <td className="px-2 py-1 text-center">
                  <span
                    className={input.oW ? "text-orange-500" : "text-gray-400"}
                  >
                    ●
                  </span>
                </td>
                <td className="px-2 py-1 text-center">
                  <span
                    className={input.oG ? "text-green-500" : "text-gray-400"}
                  >
                    ●
                  </span>
                </td>
                <td className="px-2 py-1 text-center">
                  <button
                    onClick={() => setActiveConfig(input.id)}
                    className="text-blue-500 hover:text-blue-700"
                  >
                    <Icon icon="mdi:cog-outline" />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default AnalogeEingaengeComponent;