// components/Kue705_FO.jsx
import React from "react";

const Kue705_FO = ({ slot, kueCableBreak, isOnline }) => {
  if (!isOnline) {
    return (
      <div className="border border-gray-400 w-10 h-20 flex items-center justify-center bg-gray-200">
        <div className="text-xs text-gray-500">Leer</div>
      </div>
    );
  }

  const isCableBreak = kueCableBreak[slot - 1] === 1;

  return (
    <div className="border border-gray-400 w-10 h-20 flex flex-col">
      {/* Erstes Kind, nimmt den restlichen Platz ein */}
      <div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-[10px]">
        <div className="flex w-full mb-1 items-start justify-start">{slot}</div>
        <div className="text-[10px]">KÜ705</div>
        <div className="text-[10px]">FO</div>
      </div>
      {/* Die unteren Abschnitte behalten ihre festen Höhen */}
      <div
        className={`w-full h-2/6 ${
          isCableBreak ? "bg-red-500" : "bg-green-500"
        }`}
      ></div>
      <div className="bg-blue-500 w-full h-1/6"></div>
    </div>
  );
};

export default Kue705_FO;