import React from "react";

const servers = [
  { id: "foundation", label: "F", active: true, className: "foundation" },
  { id: "corporation", label: "C", active: false, className: "corporation" },
  { id: "labs", label: "L", active: false, className: "labs" },
  { id: "divider" },
  { id: "community1", label: "AG", active: false, className: "community" },
  { id: "community2", label: "RD", active: false, className: "community" },
  { id: "add", label: "+", active: false, className: "community" },
];

export default function ServerList() {
  return (
    <div className="server-list flex flex-col items-center py-3 gap-3 w-20 bg-[#0d0d0d] border-r border-[#1a1a1a]">
      {servers.map((srv, i) =>
        srv.id === "divider" ? (
          <div key={i} className="server-divider w-10 h-0.5 bg-[#1a1a1a] my-1" />
        ) : (
          <div
            key={srv.id}
            className={`server-icon ${srv.className} ${srv.active ? "active" : ""} w-14 h-14 rounded-xl flex items-center justify-center font-bold text-lg cursor-pointer transition-all relative`}
          >
            {srv.label}
          </div>
        )
      )}
    </div>
  );
}