type BottomStatusBarProps = {
  theme: "dark" | "light";
  backendPort?: string;
  mode?: string;
  controllerName?: string;
  controllerIp?: string;
};

export function BottomStatusBar({
  theme,
  backendPort = "18450",
  mode = "Local",
  controllerName = "PLC_Principal",
  controllerIp = "198.19.0.176",
}: BottomStatusBarProps) {
  const isDark = theme === "dark";

  return (
    <footer
      className={
        isDark
          ? "flex h-10 items-center justify-between bg-[#0E1A24] px-6 text-sm text-[#D8E2EC]"
          : "flex h-10 items-center justify-between bg-[#F4F7FA] px-6 text-sm text-[#445569]"
      }
    >
      <div className="flex items-center gap-2">
        <span className="h-2.5 w-2.5 rounded-full bg-emerald-500" />
        <span>Porto Backend: {backendPort}</span>
      </div>

      <div className="flex items-center gap-2">
        <span className="h-2.5 w-2.5 rounded-full bg-emerald-500" />
        <span>Modo: {mode}</span>
      </div>

      <div className="flex items-center gap-2">
        <span className="h-2.5 w-2.5 rounded-full bg-emerald-500" />
        <span>Controlador: {controllerName}</span>
      </div>

      <div className="flex items-center gap-2">
        <span className="h-2.5 w-2.5 rounded-full bg-emerald-500" />
        <span>IP Controlador: {controllerIp}</span>
      </div>
    </footer>
  );
}