"use client";

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

/**
 * Status configuration for subscription statuses.
 * Maps each status to its visual variant.
 *
 * Status → Semantic color mapping:
 * - Active → success (green)
 * - Pending → warning (amber)
 * - Inactive, Suspended, Completed, Cancelled → neutral (navy)
 * - Terminated → error (red)
 */
const SUBSCRIPTION_STATUS_CONFIG: StatusConfigMap<SubscriptionStatus> = {
  [SUBSCRIPTION_STATUS.ACTIVE.toLowerCase()]: {
    variant: "success",
  },
  [SUBSCRIPTION_STATUS.INACTIVE.toLowerCase()]: {
    variant: "neutral",
  },
  [SUBSCRIPTION_STATUS.PENDING.toLowerCase()]: {
    variant: "warning",
  },
  [SUBSCRIPTION_STATUS.SUSPENDED.toLowerCase()]: {
    variant: "neutral",
  },
  [SUBSCRIPTION_STATUS.CANCELLED.toLowerCase()]: {
    variant: "neutral",
  },
  [SUBSCRIPTION_STATUS.TERMINATED.toLowerCase()]: {
    variant: "error",
  },
  [SUBSCRIPTION_STATUS.COMPLETED.toLowerCase()]: {
    variant: "neutral",
  },
};

const DEFAULT_CONFIG = {
  variant: "neutral" as const,
};

interface SubscriptionStatusBadgeProps {
  status: SubscriptionStatus;
}

/**
 * SubscriptionStatusBadge - Displays the status of a subscription.
 *
 * @example
 * ```tsx
 * <SubscriptionStatusBadge status="Active" />
 * <SubscriptionStatusBadge status="Terminated" />
 * ```
 */
export function SubscriptionStatusBadge({ status }: SubscriptionStatusBadgeProps) {
  return (
    <StatusBadge
      status={status}
      configMap={SUBSCRIPTION_STATUS_CONFIG}
      defaultConfig={DEFAULT_CONFIG}
      showIcon={false}
    />
  );
}
