import { ChevronRight } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Surface } from './Surface';
import { Icon } from './Icon';

export interface RaceRowProps {
  children: ReactNode;
  onClick: (e: React.MouseEvent) => void;
  status?: 'live' | 'upcoming' | 'past';
  emphasis?: 'low' | 'medium' | 'high';
  as?: any;
  href?: string;
}

/**
 * RaceRow is a semantic UI component for displaying a race in a list.
 * It encapsulates the visual style of a race entry per the GridPilot theme.
 */
export const RaceRow = ({ 
  children, 
  onClick, 
  status = 'upcoming',
  emphasis = 'medium',
  as,
  href
}: RaceRowProps) => {
  const isLive = status === 'live';
  
  return (
    <Surface 
      as={as}
      href={href}
      variant="precision"
      onClick={onClick}
      padding="none"
      cursor="pointer"
      position="relative"
      overflow="hidden"
      transition="all 0.2s ease-in-out"
      hoverBg="rgba(255, 255, 255, 0.02)"
      display="block"
      style={{ textDecoration: 'none', color: 'inherit' }}
    >
      {isLive && (
        <Box 
          position="absolute" 
          top={0} 
          left={0} 
          bottom={0}
          width="2px" 
          bg="var(--ui-color-intent-success)" 
        />
      )}
      <Box 
        display="flex" 
        alignItems="center" 
        gap={4} 
        paddingX={4} 
        paddingY={3}
        opacity={emphasis === 'low' ? 0.6 : 1}
      >
        <Box display="flex" alignItems="center" gap={4} flex={1}>
          {children}
        </Box>
        <Box flexShrink={0} display="flex" alignItems="center">
          <Icon icon={ChevronRight} size={4} intent="low" />
        </Box>
      </Box>
    </Surface>
  );
};