"use client";

import type { ReactNode } from "react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import type { SettingStatusTone } from "../_lib/types";

export function SettingStatusBadge({
  tone,
  children,
}: {
  tone: SettingStatusTone;
  children: ReactNode;
}) {
  return (
    <Badge
      className={cn(
        "h-6 rounded-md border px-2 font-medium text-[11px]",
        tone === "enabled" &&
          "border-emerald-200 bg-emerald-50 text-emerald-700",
        tone === "disabled" && "border-zinc-200 bg-zinc-50 text-zinc-500",
        tone === "warning" && "border-amber-200 bg-amber-50 text-amber-700",
        tone === "neutral" && "border-sky-200 bg-sky-50 text-sky-700"
      )}
      variant="outline"
    >
      {children}
    </Badge>
  );
}