'use client';

interface CreditsDisplayProps {
  userName: string;
  totalCredits: number;
  categoryCredits: Record<string, number>;
  isLeader: boolean;
}

export default function CreditsDisplay({
  userName,
  totalCredits,
  categoryCredits,
  isLeader,
}: CreditsDisplayProps) {
  return (
    <div className="bg-[#111] border border-[#2a3f5f] rounded-lg p-6">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-2xl font-bold text-white">{userName}</h2>
          {isLeader && (
            <span className="inline-block mt-2 px-3 py-1 bg-gradient-to-r from-[#5B7C8D] to-[#8FB0C3] text-white rounded-full text-xs font-bold">
              ⭐ Crew Leader
            </span>
          )}
        </div>
        <div className="text-right">
          <p className="text-[#666] text-sm">Total Credits</p>
          <p className="text-4xl font-bold text-[#5B7C8D]">{totalCredits}</p>
        </div>
      </div>

      {Object.keys(categoryCredits).length > 0 && (
        <div className="border-t border-[#2a3f5f] pt-6">
          <p className="text-[#8FB0C3] font-bold mb-4">By Category</p>
          <div className="grid grid-cols-2 gap-4">
            {Object.entries(categoryCredits)
              .sort(([, a], [, b]) => b - a)
              .slice(0, 6)
              .map(([category, credits]) => (
                <div key={category} className="bg-[#F8FAFC] rounded p-3">
                  <p className="text-[#666] text-xs">{category}</p>
                  <p className="text-lg font-bold text-[#8FB0C3]">{credits}</p>
                </div>
              ))}
          </div>
        </div>
      )}

      <div className="mt-6 text-[#666] text-xs">
        <p>💡 Earn 1 credit per post in each category</p>
        <p>⭐ Earn &quot;Crew Leader&quot; badge at 10+ credits</p>
      </div>
    </div>
  );
}
