"use client";

import { Badge } from "@chakra-ui/react";
import type { PlanType } from "@/lib/api/subscriptions/types";

interface PlanBadgeProps {
  plan: PlanType | "free" | "plus" | "premium";
  size?: "sm" | "md" | "lg";
}

const planColorMap: Record<string, string> = {
  free: "gray",
  plus: "blue",
  premium: "yellow",
};

/**
 * A colored badge showing the user's subscription plan.
 * Uses Chakra v3 Badge component with colorPalette.
 */
export function PlanBadge({ plan, size = "sm" }: PlanBadgeProps) {
  const planKey = String(plan).toLowerCase();
  const colorPalette = planColorMap[planKey] ?? "gray";
  const label = planKey.charAt(0).toUpperCase() + planKey.slice(1);

  return (
    <Badge
      colorPalette={colorPalette}
      variant="solid"
      size={size}
      borderRadius="full"
      px={2}
      fontWeight="bold"
      letterSpacing="0.02em"
    >
      {label}
    </Badge>
  );
}
