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

'use client';

import { ArrowRight, Car, ChevronRight, LucideIcon, Trophy, Zap } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { routes } from '@/lib/routing/RouteConfig';

interface RaceCardProps {
  track: string;
  car: string;
  scheduledAt: string;
  status: string;
  leagueName: string;
  leagueId?: string;
  strengthOfField?: number | null;
  onClick?: () => void;
  statusConfig: {
    border: string;
    bg: string;
    color: string;
    icon: LucideIcon | null;
    label: string;
  };
}

export function RaceCard({
  track,
  car,
  scheduledAt,
  status,
  leagueName,
  leagueId,
  strengthOfField,
  onClick,
  statusConfig,
}: RaceCardProps) {
  const scheduledAtDate = new Date(scheduledAt);

  return (
    <Surface
      bg="bg-surface-charcoal"
      rounded="xl"
      border
      borderColor="border-outline-steel"
      padding={4}
      onClick={onClick}
      cursor={onClick ? 'pointer' : 'default'}
      hoverBorderColor="border-primary-accent"
      transition
      position="relative"
      overflow="hidden"
      group
    >
      {/* Live indicator */}
      {status === 'running' && (
        <Box
          position="absolute"
          top="0"
          left="0"
          right="0"
          h="1"
          bg="bg-success-green"
          animate="pulse"
        />
      )}

      <Stack direction="row" align="start" gap={4}>
        {/* Time Column */}
        <Box textAlign="center" flexShrink={0} width="16">
          <Text size="lg" weight="bold" color="text-white" block>
            {scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
          </Text>
          <Text size="xs" color={statusConfig.color} block>
            {status === 'running' ? 'LIVE' : scheduledAtDate.toLocaleDateString()}
          </Text>
        </Box>

        {/* Divider */}
        <Box
          w="px"
          bg="border-outline-steel"
          alignSelf="stretch"
        />

        {/* Main Content */}
        <Box flex={1} minWidth="0">
          <Stack direction="row" align="start" justify="between" gap={4}>
            <Box minWidth="0">
              <Heading
                level={3}
                truncate
                groupHoverTextColor="text-primary-accent"
                transition
              >
                {track}
              </Heading>
              <Stack direction="row" align="center" gap={3} mt={1}>
                <Stack direction="row" align="center" gap={1}>
                  <Icon icon={Car} size={3.5} color="var(--text-gray-400)" />
                  <Text size="sm" color="text-gray-400">
                    {car}
                  </Text>
                </Stack>
                {strengthOfField && (
                  <Stack direction="row" align="center" gap={1}>
                    <Icon icon={Zap} size={3.5} color="var(--warning-amber)" />
                    <Text size="sm" color="text-gray-400">
                      SOF {strengthOfField}
                    </Text>
                  </Stack>
                )}
              </Stack>
            </Box>

            {/* Status Badge */}
            <Box
              display="flex"
              alignItems="center"
              gap={1.5}
              px={2.5}
              py={1}
              rounded="full"
              border
              borderColor="border-outline-steel"
              bg="bg-base-black"
              bgOpacity={0.5}
            >
              {statusConfig.icon && (
                <Icon icon={statusConfig.icon} size={3.5} color={statusConfig.color} />
              )}
              <Text size="xs" weight="medium" color={statusConfig.color}>
                {statusConfig.label}
              </Text>
            </Box>
          </Stack>

          {/* League Link */}
          <Box mt={3} pt={3} borderTop borderColor="border-outline-steel" borderOpacity={0.3}>
            <Link
              href={routes.league.detail(leagueId ?? '')}
              onClick={(e) => e.stopPropagation()}
            >
              <Stack direction="row" align="center" gap={2}>
                <Icon icon={Trophy} size={3.5} color="var(--primary-accent)" />
                <Text size="sm" color="text-primary-accent">
                  {leagueName}
                </Text>
                <Icon icon={ArrowRight} size={3} color="var(--primary-accent)" />
              </Stack>
            </Link>
          </Box>
        </Box>

        {/* Arrow */}
        <Icon
          icon={ChevronRight}
          size={5}
          color="var(--text-gray-500)"
          groupHoverTextColor="text-primary-accent"
          transition
          flexShrink={0}
        />
      </Stack>
    </Surface>
  );
}