'use client';

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

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

export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHeroProps) {
  return (
    <Stack gap={8}>
      <UiDashboardHero
        driverName={currentDriver.name}
        avatarUrl={currentDriver.avatarUrl}
        rating={currentDriver.rating}
        rank={currentDriver.rank}
        totalRaces={currentDriver.totalRaces}
        winRate={Math.round((currentDriver.wins / currentDriver.totalRaces) * 100) || 0}
      />

      <Stack direction="row" gap={4} wrap>
        <Link href={routes.public.leagues}>
          <Button variant="secondary" icon={<Icon icon={Flag} size={4} />}>
            Browse Leagues
          </Button>
        </Link>
        <Link href={routes.protected.profile}>
          <Button variant="primary" icon={<Icon icon={User} size={4} />}>
            View Profile
          </Button>
        </Link>
      </Stack>

      <StatGrid
        variant="box"
        columns={{ base: 2, md: 4 }}
        stats={[
          { icon: Trophy, label: 'Wins', value: currentDriver.wins, intent: 'success' },
          { icon: Medal, label: 'Podiums', value: currentDriver.podiums, intent: 'warning' },
          { icon: Target, label: 'Consistency', value: currentDriver.consistency, intent: 'primary' },
          { icon: Users, label: 'Active Leagues', value: activeLeaguesCount, intent: 'telemetry' },
        ]}
      />
    </Stack>
  );
}