import Link from "next/link";
import { getTranslations } from "next-intl/server";

import { Button } from "@/components/ui/button";
import { getUserProfile } from "@/lib/profiles";
import { getPlanLabel, type PlanId } from "@/lib/plans";
import { cn } from "@/lib/utils";

const planBadgeStyles: Record<PlanId, string> = {
  free: "bg-neutral-100 text-neutral-700",
  pro: "bg-primary-100 text-primary-700",
  business: "bg-violet-100 text-violet-700",
};

interface DashboardPlanBadgeProps {
  userId: string;
}

export async function DashboardPlanBadge({ userId }: DashboardPlanBadgeProps) {
  const t = await getTranslations("auto.componentsDashboardDashboardPlanBadge");
  const profile = await getUserProfile(userId);

  return (
    <>
      <p
        className={cn(
          "mt-1 inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold",
          planBadgeStyles[profile.plan]
        )}
      >
        {getPlanLabel(profile.plan)}
      </p>
      {profile.plan !== "business" ? (
        <Button size="sm" className="mt-3 w-full" asChild>
          <Link href="/#pricing">{t("upgradePlan")}</Link>
        </Button>
      ) : null}
    </>
  );
}

export function DashboardPlanBadgeSkeleton() {
  return (
    <div
      className="mt-1 h-5 w-20 animate-pulse rounded-full bg-gray-200"
      aria-hidden
    />
  );
}
