'use client';

import { SidebarRaceItem } from '@/components/races/SidebarRaceItem';
import { routes } from '@/lib/routing/RouteConfig';
import type { RaceViewData } from '@/lib/view-data/RacesViewData';
import { Panel } from '@/ui/Panel';
import { SidebarActionLink } from '@/ui/SidebarActionLink';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Trophy, Users } from 'lucide-react';
import React from 'react';

interface RaceSidebarProps {
  upcomingRaces: RaceViewData[];
  recentResults: RaceViewData[];
  onRaceClick: (raceId: string) => void;
}

export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceSidebarProps) {
  return (
    <Stack gap={6}>
      {/* Upcoming This Week */}
      <Panel 
        variant="precision"
        title="Next Up" 
        description="Scheduled sessions"
      >
        {upcomingRaces.length === 0 ? (
          <Box paddingY={4} textAlign="center">
            <Text size="sm" variant="low">No races scheduled this week</Text>
          </Box>
        ) : (
          <Stack gap={1}>
            {upcomingRaces.map((race) => (
              <SidebarRaceItem
                key={race.id}
                race={{
                  id: race.id,
                  track: race.track,
                  scheduledAt: race.scheduledAt
                }}
                onClick={() => onRaceClick(race.id)}
              />
            ))}
          </Stack>
        )}
      </Panel>

      {/* Recent Results */}
      <Panel 
        variant="precision"
        title="Recent Results" 
        description="Latest finishes"
      >
        {recentResults.length === 0 ? (
          <Box paddingY={4} textAlign="center">
            <Text size="sm" variant="low">No completed races yet</Text>
          </Box>
        ) : (
          <Stack gap={1}>
            {recentResults.map((race) => (
              <SidebarRaceItem
                key={race.id}
                race={{
                  id: race.id,
                  track: race.track,
                  scheduledAt: race.scheduledAt
                }}
                onClick={() => onRaceClick(race.id)}
              />
            ))}
          </Stack>
        )}
      </Panel>

      {/* Quick Actions */}
      <Panel variant="precision" title="Quick Actions">
        <Stack gap={2}>
          <SidebarActionLink
            href={routes.public.leagues}
            icon={Users}
            label="Browse Leagues"
          />
          <SidebarActionLink
            href={routes.public.leaderboards}
            icon={Trophy}
            label="View Leaderboards"
          />
        </Stack>
      </Panel>
    </Stack>
  );
}