import Link from 'next/link';
import { Crown, ChevronRight } from 'lucide-react';

interface LeagueStandingItemProps {
  leagueId: string;
  leagueName: string;
  position: number;
  points: number;
  totalDrivers: number;
  className?: string;
}

export function LeagueStandingItem({
  leagueId,
  leagueName,
  position,
  points,
  totalDrivers,
  className,
}: LeagueStandingItemProps) {
  return (
    <Link
      href={`/leagues/${leagueId}/standings`}
      className={`flex items-center gap-4 p-4 rounded-xl bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/30 transition-colors group ${className || ''}`}
    >
      <div className={`flex h-12 w-12 items-center justify-center rounded-xl font-bold text-xl ${
        position === 1 ? 'bg-yellow-400/20 text-yellow-400' :
        position === 2 ? 'bg-gray-300/20 text-gray-300' :
        position === 3 ? 'bg-orange-400/20 text-orange-400' :
        'bg-iron-gray text-gray-400'
      }`}>
        {position > 0 ? `P${position}` : '-'}
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
          {leagueName}
        </p>
        <p className="text-sm text-gray-500">
          {points} points • {totalDrivers} drivers
        </p>
      </div>
      <div className="flex items-center gap-2">
        {position <= 3 && position > 0 && (
          <Crown className={`w-5 h-5 ${
            position === 1 ? 'text-yellow-400' :
            position === 2 ? 'text-gray-300' :
            'text-orange-400'
          }`} />
        )}
        <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors" />
      </div>
    </Link>
  );
}