import { SERVERS } from "../js/variables";
import SCard from "./server-card";
import Link from "next/link";

export default function ServerBlock({}) {
  return (
    <div className="p-4 w-full inline-flow align-middle justify-center space-y-4">
      <p className="w-full text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
        All the stuff I run uses the following server machines, with a reverse
        SSH connection to a{" "}
        <Link href="https://www.linode.com/?r=61251dc51397edcfacadd7f3744b258b63ad4248">
          <a
            target="_blank"
            className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
          >
            Linode VPS
          </a>
        </Link>
        {"."}
      </p>
      {Object.keys(SERVERS).map((server) => (
        <SCard
          server={server}
          model={SERVERS[server].model}
          cpu={SERVERS[server].cpu}
          gpu={SERVERS[server].gpu}
          ram={SERVERS[server].ram}
          os={SERVERS[server].os}
        />
      ))}
    </div>
  );
}