import { routes } from '@/lib/routing/RouteConfig';
import { Button } from '@/ui/Button';
import { DashboardHero as UiDashboardHero } from '@/ui/DashboardHero';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { StatBox } from '@/ui/StatBox';
import { Flag, Medal, Target, Trophy, User, Users } from 'lucide-react';

interface DashboardHeroProps {
  currentDriver: {
    name: string;
    avatarUrl: string;
    country: string;
    rating: string | number;
    rank: string | number;
    totalRaces: string | number;
    wins: string | number;
    podiums: string | number;
    consistency: string;
  };
  activeLeaguesCount: string | number;
}

export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHeroProps) {
  return (
    <UiDashboardHero
      driverName={currentDriver.name}
      avatarUrl={currentDriver.avatarUrl}
      country={currentDriver.country}
      rating={currentDriver.rating}
      rank={currentDriver.rank}
      totalRaces={currentDriver.totalRaces}
      actions={
        <>
          <Link href={routes.public.leagues} variant="ghost">
            <Button variant="secondary" icon={<Icon icon={Flag} size={4} />}>
              Browse Leagues
            </Button>
          </Link>
          <Link href={routes.protected.profile} variant="ghost">
            <Button variant="primary" icon={<Icon icon={User} size={4} />}>
              View Profile
            </Button>
          </Link>
        </>
      }
      stats={
        <>
          <StatBox icon={Trophy} label="Wins" value={currentDriver.wins} color="var(--performance-green)" />
          <StatBox icon={Medal} label="Podiums" value={currentDriver.podiums} color="var(--warning-amber)" />
          <StatBox icon={Target} label="Consistency" value={currentDriver.consistency} color="var(--primary-blue)" />
          <StatBox icon={Users} label="Active Leagues" value={activeLeaguesCount} color="var(--neon-purple)" />
        </>
      }
    />
  );
}