import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";
import type { FilterStatus } from "./filter/filter-button";

interface StatusBadgeProps {
  status: FilterStatus;
  className?: string;
}

const statusConfig: Record<
  FilterStatus,
  { labelKey: string; bgColor: string; textColor: string }
> = {
  published: {
    labelKey: "published",
    bgColor: "bg-[var(--status-published-bg)]",
    textColor: "text-[var(--status-published-text)]",
  },
  disabled: {
    labelKey: "disabled",
    bgColor: "bg-[var(--status-disabled-bg)]",
    textColor: "text-[var(--status-disabled-text)]",
  },
  scheduled: {
    labelKey: "scheduled",
    bgColor: "bg-[var(--status-scheduled-bg)]",
    textColor: "text-[var(--status-scheduled-text)]",
  },
  draft: {
    labelKey: "draft",
    bgColor: "bg-[var(--status-draft-bg)]",
    textColor: "text-[var(--status-draft-text)]",
  },
};

export function StatusBadge({ status, className }: StatusBadgeProps) {
  const t = useTranslations("dashboard.statuses");
  const config = statusConfig[status];

  return (
    <div
      className={cn(
        "inline-flex items-center justify-center h-8 px-4 py-1.5 rounded-lg  font-bold text-[11px] tracking-[0.1px]",
        config.bgColor,
        config.textColor,
        className
      )}
    >
      {t(config.labelKey)}
    </div>
  );
}