"use client";

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

interface InputData {
  id: number;
  value: number;
  name: string;
  uW: boolean;
  uG: boolean;
  oW: boolean;
  oG: boolean;
}

interface XioPmProps {
  title: string;
  data: InputData[];
  onConfigClick: (id: number) => void;
}

const XioPM: React.FC<XioPmProps> = ({ title, data, onConfigClick }) => (
  <div className="border rounded-lg shadow-md p-6 bg-white">
    <h3 className="text-sm font-semibold mb-1">{title}</h3>
    <table className="w-full h-full text-xs text-left">
      <thead className="bg-gray-100 text-gray-700">
        <tr>
          <th className="px-1 py-1">Eingang</th>
          <th className="px-1 py-1">Wert</th>
          <th className="px-1 py-1">Bezeichnung</th>
          <th className="px-1 py-1 text-center">uW</th>
          <th className="px-1 py-1 text-center">uG</th>
          <th className="px-1 py-1 text-center">oW</th>
          <th className="px-1 py-1 text-center">oG</th>
          <th className="px-1 py-1 text-center">Aktion</th>
        </tr>
      </thead>
      <tbody>
        {data.map((input) => (
          <tr key={input.id} className="border-t">
            <td className="px-1 py-1">{input.id}</td>
            <td className="px-1 py-1">{input.value.toFixed(2)}</td>
            <td className="px-1 py-1">{input.name}</td>
            <td className="px-1 py-1 text-center">
              <span className={input.uW ? "text-green-500" : "text-gray-400"}>
                ●
              </span>
            </td>
            <td className="px-1 py-1 text-center">
              <span className={input.uG ? "text-green-500" : "text-gray-400"}>
                ●
              </span>
            </td>
            <td className="px-1 py-1 text-center">
              <span className={input.oW ? "text-orange-500" : "text-gray-400"}>
                ●
              </span>
            </td>
            <td className="px-1 py-1 text-center">
              <span className={input.oG ? "text-green-500" : "text-gray-400"}>
                ●
              </span>
            </td>
            <td className="px-1 py-1 text-center">
              <button
                onClick={() => onConfigClick(input.id)}
                className="text-blue-500 hover:text-blue-700"
              >
                <Icon icon="mdi:cog-outline" />
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

export default XioPM;