gridpilot.gg/apps/website/components/races/RaceSidebar.tsx

import React from 'react';
import { Clock, Trophy, Users, ChevronRight, CheckCircle2 } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import type { RaceViewData } from '@/lib/view-data/RacesViewData';
import { routes } from '@/lib/routing/RouteConfig';

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

export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceSidebarProps) {
  return (
    <Stack gap={6}>
      {/* Upcoming This Week */}
      <Card>
        <Stack gap={4}>
          <Stack direction="row" align="center" justify="between">
            <Heading level={3} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
              <Clock style={{ width: '1rem', height: '1rem', color: '#3b82f6' }} />
              Next Up
            </Heading>
            <Text size="xs" color="text-gray-500">This week</Text>
          </Stack>

          {upcomingRaces.length === 0 ? (
            <Text size="sm" color="text-gray-500" style={{ textAlign: 'center', padding: '1rem 0' }}>
              No races scheduled this week
            </Text>
          ) : (
            <Stack gap={3}>
              {upcomingRaces.map((race) => (
                <Box
                  key={race.id}
                  onClick={() => onRaceClick(race.id)}
                  style={{ 
                    display: 'flex', 
                    alignItems: 'center', 
                    gap: '0.75rem', 
                    padding: '0.5rem', 
                    borderRadius: '0.5rem', 
                    cursor: 'pointer',
                    transition: 'background-color 0.2s'
                  }}
                >
                  <Box style={{ flexShrink: 0, width: '2.5rem', height: '2.5rem', backgroundColor: 'rgba(59, 130, 246, 0.1)', borderRadius: '0.5rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Text weight="bold" color="text-primary-blue" style={{ width: '100%', textAlign: 'center' }}>
                      {new Date(race.scheduledAt).getDate()}
                    </Text>
                  </Box>
                  <Box style={{ minWidth: 0, flex: 1 }}>
                    <Text size="sm" weight="medium" color="text-white" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block' }}>{race.track}</Text>
                    <Text size="xs" color="text-gray-500">{race.timeLabel}</Text>
                  </Box>
                  <ChevronRight style={{ width: '1rem', height: '1rem', color: '#737373' }} />
                </Box>
              ))}
            </Stack>
          )}
        </Stack>
      </Card>

      {/* Recent Results */}
      <Card>
        <Stack gap={4}>
          <Heading level={3} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
            <Trophy style={{ width: '1rem', height: '1rem', color: '#f59e0b' }} />
            Recent Results
          </Heading>

          {recentResults.length === 0 ? (
            <Text size="sm" color="text-gray-500" style={{ textAlign: 'center', padding: '1rem 0' }}>
              No completed races yet
            </Text>
          ) : (
            <Stack gap={3}>
              {recentResults.map((race) => (
                <Box
                  key={race.id}
                  onClick={() => onRaceClick(race.id)}
                  style={{ 
                    display: 'flex', 
                    alignItems: 'center', 
                    gap: '0.75rem', 
                    padding: '0.5rem', 
                    borderRadius: '0.5rem', 
                    cursor: 'pointer',
                    transition: 'background-color 0.2s'
                  }}
                >
                  <Box style={{ flexShrink: 0, width: '2.5rem', height: '2.5rem', backgroundColor: 'rgba(115, 115, 115, 0.1)', borderRadius: '0.5rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <CheckCircle2 style={{ width: '1.25rem', height: '1.25rem', color: '#737373' }} />
                  </Box>
                  <Box style={{ minWidth: 0, flex: 1 }}>
                    <Text size="sm" weight="medium" color="text-white" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block' }}>{race.track}</Text>
                    <Text size="xs" color="text-gray-500">{race.scheduledAtLabel}</Text>
                  </Box>
                  <ChevronRight style={{ width: '1rem', height: '1rem', color: '#737373' }} />
                </Box>
              ))}
            </Stack>
          )}
        </Stack>
      </Card>

      {/* Quick Actions */}
      <Card>
        <Stack gap={4}>
          <Heading level={3}>Quick Actions</Heading>
          <Stack gap={2}>
            <Link
              href={routes.public.leagues}
              variant="ghost"
              style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.75rem', borderRadius: '0.5rem', backgroundColor: '#0f1115' }}
            >
              <Box style={{ padding: '0.5rem', backgroundColor: 'rgba(59, 130, 246, 0.1)', borderRadius: '0.5rem' }}>
                <Users style={{ width: '1rem', height: '1rem', color: '#3b82f6' }} />
              </Box>
              <Text size="sm" color="text-white">Browse Leagues</Text>
              <ChevronRight style={{ width: '1rem', height: '1rem', color: '#737373', marginLeft: 'auto' }} />
            </Link>
            <Link
              href={routes.public.leaderboards}
              variant="ghost"
              style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.75rem', borderRadius: '0.5rem', backgroundColor: '#0f1115' }}
            >
              <Box style={{ padding: '0.5rem', backgroundColor: 'rgba(245, 158, 11, 0.1)', borderRadius: '0.5rem' }}>
                <Trophy style={{ width: '1rem', height: '1rem', color: '#f59e0b' }} />
              </Box>
              <Text size="sm" color="text-white">View Leaderboards</Text>
              <ChevronRight style={{ width: '1rem', height: '1rem', color: '#737373', marginLeft: 'auto' }} />
            </Link>
          </Stack>
        </Stack>
      </Card>
    </Stack>
  );
}