"use client";

import { Crown } from "@/lib/icons";
import type { LimitKey } from "@/lib/plans";

interface UsageBadgeProps {
  current: number;
  limit: number;
  label: string;
  limitKey?: LimitKey;
}

export function UsageBadge({ current, limit, label }: UsageBadgeProps) {
  if (limit === Infinity || limit <= 0) return null;

  const pct = current / limit;
  const isWarning = pct >= 0.8;
  const isFull = current >= limit;

  return (
    <span
      className={`inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full border font-medium ${
        isFull
          ? "bg-destructive/10 text-destructive border-destructive/20"
          : isWarning
          ? "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:border-amber-800"
          : "bg-muted text-muted-foreground border-transparent"
      }`}
      title={`${current}/${limit} ${label}`}
    >
      {isFull && <Crown className="size-3" weight="fill" />}
      {current}/{limit} {label}
    </span>
  );
}

interface UpgradeBannerProps {
  message: string;
}

export function UpgradeBanner({ message }: UpgradeBannerProps) {
  return (
    <div className="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-300">
      <Crown className="size-4 shrink-0 text-amber-500" weight="fill" />
      <span className="flex-1">{message}</span>
      <a
        href="/dashboard/settings?tab=plan"
        className="whitespace-nowrap font-semibold text-amber-700 underline-offset-2 hover:underline dark:text-amber-400"
      >
        Pro&apos;ya Geç
      </a>
    </div>
  );
}
