import React from 'react';
import { Card } from '@/ui/Card';
import { RankBadge } from '@/components/leaderboards/RankBadge';
import { DriverIdentity } from '@/components/drivers/DriverIdentity';
import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import { Stack } from '@/ui/Stack';
import { DriverStats } from '@/components/drivers/DriverStats';
import { routes } from '@/lib/routing/RouteConfig';

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 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,
  });

  const winRate = racesCompleted > 0 ? ((wins / racesCompleted) * 100).toFixed(0) : '0';

  return (
    <Card
      onClick={onClick}
      transition
    >
      <Stack direction="row" align="center" justify="between">
        <Stack direction="row" align="center" gap={4} flexGrow={1}>
          <RankBadge rank={rank} size="lg" />

          <DriverIdentity
            driver={driverViewModel}
            href={routes.driver.detail(id)}
            meta={`${nationality} • ${racesCompleted} races`}
            size="md"
          />
        </Stack>

        <DriverStats
          rating={rating}
          wins={wins}
          podiums={podiums}
          winRate={winRate}
        />
      </Stack>
    </Card>
  );
}