'use client';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { cn } from '@/lib/utils';
import type { LeaderboardEntry } from '@/types';

interface LeaderboardCardProps {
  entry: LeaderboardEntry;
  isCurrentUser?: boolean;
}

export function LeaderboardCard({ entry, isCurrentUser }: LeaderboardCardProps) {
  const rankColors: Record<number, string> = {
    1: 'bg-yellow-400/10 text-yellow-600 border-yellow-400/30',
    2: 'bg-gray-300/10 text-gray-500 border-gray-300/30',
    3: 'bg-orange-400/10 text-orange-500 border-orange-400/30',
  };

  return (
    <div
      className={cn(
        'flex items-center gap-3 rounded-xl p-3 transition-colors',
        isCurrentUser
          ? 'bg-primary/5 border border-primary/20'
          : 'hover:bg-muted/50'
      )}
    >
      <div
        className={cn(
          'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-sm font-bold border',
          rankColors[entry.rank] || 'bg-muted text-muted-foreground border-border'
        )}
      >
        {entry.rank}
      </div>

      <Avatar className="h-8 w-8">
        <AvatarImage src={entry.studentAvatar} />
        <AvatarFallback className="text-xs bg-primary/10 text-primary">
          {entry.studentName.charAt(0)}
        </AvatarFallback>
      </Avatar>

      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium truncate">{entry.studentName}</p>
        <p className="text-xs text-muted-foreground">
          {entry.completedVerses} nadhom
        </p>
      </div>

      <div className="text-right">
        <p className="text-sm font-bold text-primary">{entry.averageScore}</p>
        <p className="text-[10px] text-muted-foreground">skor</p>
      </div>
    </div>
  );
}