"use client";

import {
  SUBSCRIPTION_STATUS,
  type SubscriptionStatus,
} from "@customer-portal/domain/subscriptions";

const STATUS_COLOR_MAP: Record<SubscriptionStatus, string> = {
  [SUBSCRIPTION_STATUS.ACTIVE]: "bg-green-100 text-green-800",
  [SUBSCRIPTION_STATUS.INACTIVE]: "bg-gray-100 text-gray-800",
  [SUBSCRIPTION_STATUS.PENDING]: "bg-blue-100 text-blue-800",
  [SUBSCRIPTION_STATUS.SUSPENDED]: "bg-yellow-100 text-yellow-800",
  [SUBSCRIPTION_STATUS.CANCELLED]: "bg-gray-100 text-gray-800",
  [SUBSCRIPTION_STATUS.TERMINATED]: "bg-red-100 text-red-800",
  [SUBSCRIPTION_STATUS.COMPLETED]: "bg-green-100 text-green-800",
};

export function SubscriptionStatusBadge({ status }: { status: SubscriptionStatus }) {
  const color = STATUS_COLOR_MAP[status] ?? "bg-gray-100 text-gray-800";

  return (
    <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${color}`}>
      {status}
    </span>
  );
}
