"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 bg-white flex flex-col h-full p-4 lg:p-6 xl:p-8">
      <h3 className="text-sm lg:text-base xl:text-lg font-semibold mb-2">
        Analoge Eingänge
      </h3>

      <div className="overflow-auto flex-grow">
        <table className="table-auto w-full text-xs lg:text-sm xl:text-md text-left border-collapse">
          <thead className="bg-gray-100 text-gray-700">
            <tr>
              <th className="px-2 lg:px-3 py-1 lg:py-2 whitespace-nowrap">
                Eingang
              </th>
              <th className="px-2 lg:px-3 py-1 lg:py-2 whitespace-nowrap">
                Wert
              </th>
              <th className="px-2 lg:px-3 py-1 lg:py-2 whitespace-nowrap">
                Bezeichnung
              </th>
              <th className="px-2 lg:px-3 py-1 lg:py-2 text-center">uW</th>
              <th className="px-2 lg:px-3 py-1 lg:py-2 text-center">uG</th>
              <th className="px-2 lg:px-3 py-1 lg:py-2 text-center">oW</th>
              <th className="px-2 lg:px-3 py-1 lg:py-2 text-center">oG</th>
              <th className="px-2 lg:px-3 py-1 lg:py-2 text-center">Aktion</th>
            </tr>
          </thead>
          <tbody className="text-gray-600">
            {analogInputs.map((input) => (
              <tr
                key={input.id}
                className="border-t hover:bg-gray-50 transition"
              >
                <td className="px-2 lg:px-3 py-1 lg:py-2">{input.id}</td>
                <td className="px-2 lg:px-3 py-1 lg:py-2">{input.value}</td>
                <td className="px-2 lg:px-3 py-1 lg:py-2">{input.name}</td>
                <td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
                  <span
                    className={
                      input.uW
                        ? "text-green-500 text-lg lg:text-xl"
                        : "text-gray-400"
                    }
                  >
                    ●
                  </span>
                </td>
                <td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
                  <span
                    className={
                      input.uG
                        ? "text-green-500 text-lg lg:text-xl"
                        : "text-gray-400"
                    }
                  >
                    ●
                  </span>
                </td>
                <td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
                  <span
                    className={
                      input.oW
                        ? "text-orange-500 text-lg lg:text-xl"
                        : "text-gray-400"
                    }
                  >
                    ●
                  </span>
                </td>
                <td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
                  <span
                    className={
                      input.oG
                        ? "text-green-500 text-lg lg:text-xl"
                        : "text-gray-400"
                    }
                  >
                    ●
                  </span>
                </td>
                <td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
                  <button
                    onClick={() => setActiveConfig(input.id)}
                    className="text-littwin-blue hover:text-littwin-dark transition"
                  >
                    <Icon
                      icon="mdi:cog-outline"
                      className="w-4 lg:w-5 xl:w-6"
                    />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default AnalogeEingaengeComponent;
