"use client";

import { cn } from "@hexahost/ui";
import type { GameServerStatus } from "@/lib/api/servers";

const statusStyles: Record<GameServerStatus, string> = {
  DRAFT: "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
  PROVISIONING: "bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300",
  INSTALLING: "bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300",
  STOPPED: "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
  STARTING: "bg-sky-100 text-sky-800 dark:bg-sky-950 dark:text-sky-300",
  RUNNING: "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300",
  STOPPING: "bg-sky-100 text-sky-800 dark:bg-sky-950 dark:text-sky-300",
  ERROR: "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300",
  DELETING: "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300",
  DELETED: "bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-500",
};

interface ServerStatusBadgeProps {
  status: GameServerStatus;
  label: string;
  className?: string;
}

export function ServerStatusBadge({ status, label, className }: ServerStatusBadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
        statusStyles[status],
        className,
      )}
    >
      {label}
    </span>
  );
}
