wulf-pulse/components/kiosk/ticket-leaders-card.tsx

'use client';

import { Trophy } from 'lucide-react';

interface ResourceLeader {
  resourceName: string;
  ticketsClosed: number;
}

interface TicketLeadersCardProps {
  leaders: ResourceLeader[];
}

export function TicketLeadersCard({ leaders }: TicketLeadersCardProps) {
  const getMedalColor = (index: number) => {
    if (index === 0) return 'text-yellow-400';
    if (index === 1) return 'text-gray-300';
    if (index === 2) return 'text-orange-400';
    return 'text-blue-400';
  };

  const getMedalIcon = (index: number) => {
    if (index === 0) return '🥇';
    if (index === 1) return '🥈';
    if (index === 2) return '🥉';
    return `${index + 1}.`;
  };

  return (
    <div className="flex h-full w-full bg-gradient-to-br from-purple-900/20 to-blue-900/20 border-4 border-purple-500 rounded-3xl overflow-hidden">
      {/* Left 1/3 - Title and Icon */}
      <div className="w-1/3 flex flex-col items-center justify-center p-8 border-r border-gray-700">
        <Trophy className="w-24 h-24 mb-4 text-purple-500" />
        <div className="text-6xl font-bold mb-2 text-purple-500">
          {leaders.length}
        </div>
        <div className="text-2xl text-gray-300 text-center font-semibold">
          Ticket Leaders
        </div>
        <div className="text-lg text-gray-500 mt-2">
          Last 30 Days
        </div>
      </div>

      {/* Right 2/3 - Leaderboard */}
      <div className="w-2/3 p-8 flex flex-col">
        <h3 className="text-xl font-semibold text-gray-300 mb-4">Top Performers</h3>
        <div className="space-y-2 flex-1 overflow-y-auto">
          {leaders.map((leader, index) => (
            <div 
              key={leader.resourceName} 
              className={`bg-black/30 rounded-lg p-4 border ${
                index < 3 ? 'border-purple-500/50' : 'border-gray-700'
              }`}
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <span className={`text-2xl font-bold ${getMedalColor(index)} min-w-[40px]`}>
                    {getMedalIcon(index)}
                  </span>
                  <span className="text-lg font-semibold text-gray-300">
                    {leader.resourceName}
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-2xl font-bold text-purple-400">
                    {leader.ticketsClosed}
                  </span>
                  <span className="text-sm text-gray-500">tickets</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}