'use client';

import Card from '../ui/Card';

interface DriverCardProps {
  id: string;
  name: string;
  avatar?: string;
  rating: number;
  skillLevel: 'beginner' | 'intermediate' | 'advanced' | 'pro';
  nationality?: string;
  racesCompleted: number;
  wins: number;
  isActive?: boolean;
  onClick?: () => void;
}

export default function DriverCard({
  id,
  name,
  avatar,
  rating,
  skillLevel,
  nationality,
  racesCompleted,
  wins,
  isActive = true,
  onClick,
}: DriverCardProps) {
  const skillBadgeColors = {
    beginner: 'bg-green-500/20 text-green-400',
    intermediate: 'bg-blue-500/20 text-blue-400',
    advanced: 'bg-purple-500/20 text-purple-400',
    pro: 'bg-red-500/20 text-red-400',
  };

  return (
    <div
      className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
      onClick={onClick}
    >
      <Card>
        <div className="space-y-4">
          <div className="flex items-start gap-4">
            <div className="relative">
              <div className="w-16 h-16 bg-charcoal-outline rounded-full flex items-center justify-center flex-shrink-0">
                {avatar ? (
                  <img
                    src={avatar}
                    alt={name}
                    className="w-full h-full object-cover rounded-full"
                  />
                ) : (
                  <span className="text-2xl font-bold text-gray-500">
                    {name.charAt(0)}
                  </span>
                )}
              </div>
              {isActive && (
                <div className="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-iron-gray rounded-full" />
              )}
            </div>
            <div className="flex-1 min-w-0">
              <h3 className="text-lg font-semibold text-white truncate">
                {name}
              </h3>
              {nationality && (
                <p className="text-sm text-gray-400">{nationality}</p>
              )}
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div className="flex-1">
              <div className="text-2xl font-bold text-white">{rating}</div>
              <div className="text-xs text-gray-400">Rating</div>
            </div>
            <div className="flex-1 text-center">
              <div className="text-2xl font-bold text-white">{wins}</div>
              <div className="text-xs text-gray-400">Wins</div>
            </div>
            <div className="flex-1 text-right">
              <div className="text-2xl font-bold text-white">{racesCompleted}</div>
              <div className="text-xs text-gray-400">Races</div>
            </div>
          </div>

          <span
            className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
              skillBadgeColors[skillLevel]
            }`}
          >
            {skillLevel.charAt(0).toUpperCase() + skillLevel.slice(1)}
          </span>
        </div>
      </Card>
    </div>
  );
}