import Card from '@/components/ui/Card';
import RankBadge from '@/components/drivers/RankBadge';
import DriverIdentity from '@/components/drivers/DriverIdentity';
import { DriverViewModel } from '@/lib/view-models/DriverViewModel';

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

export default function DriverCard(props: DriverCardProps) {
  const {
    id,
    name,
    rating,
    nationality,
    racesCompleted,
    wins,
    podiums,
    rank,
    onClick,
  } = props;

  // Create a proper DriverViewModel instance
  const driverViewModel = new DriverViewModel({
    id,
    name,
    avatarUrl: null,
  });

  return (
    <Card
      className="hover:border-charcoal-outline/60 transition-colors cursor-pointer"
      {...(onClick ? { onClick } : {})}
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4 flex-1">
          <RankBadge rank={rank} size="lg" />

          <DriverIdentity
            driver={driverViewModel}
            href={`/drivers/${id}`}
            meta={`${nationality} • ${racesCompleted} races`}
            size="md"
          />
        </div>

        <div className="flex items-center gap-8 text-center">
          <div>
            <div className="text-2xl font-bold text-primary-blue">{rating}</div>
            <div className="text-xs text-gray-400">Rating</div>
          </div>
          <div>
            <div className="text-2xl font-bold text-green-400">{wins}</div>
            <div className="text-xs text-gray-400">Wins</div>
          </div>
          <div>
            <div className="text-2xl font-bold text-warning-amber">{podiums}</div>
            <div className="text-xs text-gray-400">Podiums</div>
          </div>
          <div>
            <div className="text-sm text-gray-400">
              {racesCompleted > 0 ? ((wins / racesCompleted) * 100).toFixed(0) : '0'}%
            </div>
            <div className="text-xs text-gray-500">Win Rate</div>
          </div>
        </div>
      </div>
    </Card>
  );
}