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-primary-50",
    textColor: "text-status-green",
  },
  disabled: {
    labelKey: "disabled",
    bgColor: "bg-destructive/10",
    textColor: "text-destructive",
  },
  scheduled: {
    labelKey: "scheduled",
    bgColor: "bg-primary-50",
    textColor: "text-primary",
  },
  draft: {
    labelKey: "draft",
    bgColor: "bg-muted",
    textColor: "text-muted-foreground",
  },
};

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-sans font-bold text-[11px] tracking-[0.1px]",
        config.bgColor,
        config.textColor,
        className
      )}
    >
      {t(config.labelKey)}
    </div>
  );
}