/* eslint-disable react/prop-types */
import { FaCheckCircle, FaTimesCircle } from "react-icons/fa";

const AppDevice = ({ devices, theme }) => {
  return (
    <div className={`device-table-container ${theme}`}>
      {/* Header */}
      <div className="device-table-header">
        <div className="header-item">IP Address</div>
        <div className="header-item">Device Name</div>
        <div className="header-item">Status</div>
      </div>

      {/* Body */}
      <div className="device-table-body">
        {devices.map((device) => (
          <div className="device-table-row" key={device.id}>
            <div className="row-item">{device.ip}</div>
            <div className="row-item">{device.name}</div>
            <div
              className={`row-item status ${
                device.is_online === "Online" ? "online" : "offline"
              }`}
            >
              {device.is_online === "Online" ? (
                <>
                  <FaCheckCircle className="me-2" />
                  Online
                </>
              ) : (
                <>
                  <FaTimesCircle className="me-2" />
                  Offline
                </>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default AppDevice;