"use client";

import { Button } from "@hexahost/ui";
import { useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { ServerCard } from "@/components/servers/server-card";
import { getServer } from "@/lib/api/servers";

interface ServerDetailContentProps {
  serverId: string;
}

export function ServerDetailContent({ serverId }: ServerDetailContentProps) {
  const t = useTranslations("servers");
  const { data, isLoading, isError } = useQuery({
    queryKey: ["server", serverId],
    queryFn: () => getServer(serverId),
  });

  if (isLoading) {
    return <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("loading")}</p>;
  }

  if (isError || !data) {
    return null;
  }

  return <ServerCard server={data} showDetailsLink={false} />;
}
