"use client"; // components/main/einausgaenge/DigitalInputs.tsx

import React from "react";
import { Icon } from "@iconify/react";

export default function DigitalInputs({
  inputsGroup1,
  inputsGroup2,
  openInputModal,
}) {
  return (
    <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-3/5 flex-grow flex flex-col">
      <h2 className="text-md font-bold mb-4 flex items-center">
        <Icon icon="mdi:input" className="text-blue-500 mr-2 text-2xl" />
        Digitale Eingänge
      </h2>
      <div className="grid grid-cols-2 gap-4">
        {[inputsGroup1, inputsGroup2].map((group, index) => (
          <div key={index} className="flex-grow">
            <table className="w-full text-sm border-collapse bg-white rounded-lg">
              <thead className="bg-gray-100 border-b">
                <tr>
                  <th className="px-2 py-1 text-left">Eingang</th>
                  <th className="px-2 py-1 text-left">Zustand</th>
                  <th className="px-2 py-1 text-left">Bezeichnung</th>
                  <th className="px-2 py-1 text-left">Aktion</th>
                </tr>
              </thead>
              <tbody>
                {group.map((input) => (
                  <tr key={input.id} className="border-b">
                    <td className="flex items-center p-2 xl:py-0 2xl:p-1">
                      <Icon
                        icon="mdi:input"
                        className="text-black-500 mr-2 text-xl"
                      />
                      {input.id}
                    </td>
                    <td className="p-2 xl:py-0">
                      <span
                        className={
                          input.status === "active"
                            ? "text-green-500"
                            : "text-red-500"
                        }
                      >
                        {input.status === "active" ? "●" : "⨉"}
                      </span>
                    </td>
                    <td className="p-2 xl:py-0">{input.description}</td>
                    <td className="p-2 xl:py-0">
                      <Icon
                        icon="mdi:settings"
                        className="text-gray-400 text-lg cursor-pointer"
                        onClick={() => openInputModal(input)}
                      />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ))}
      </div>
    </div>
  );
}