import { ChevronRight } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Card } from './Card';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Text } from './Text';

export interface RaceCardProps {
  children: ReactNode;
  onClick: () => void;
  isLive?: boolean;
}

export const RaceCard = ({ children, onClick, isLive }: RaceCardProps) => {
  return (
    <Card 
      variant="dark" 
      onClick={onClick} 
      style={{ position: 'relative', cursor: 'pointer', overflow: 'hidden' }}
    >
      {isLive && (
        <Box 
          position="absolute" 
          top={0} 
          left={0} 
          right={0} 
          height="2px" 
          bg="var(--ui-color-intent-success)" 
          style={{ opacity: 0.8 }}
        />
      )}
      <Box display="flex" alignItems="center" gap={4}>
        {children}
        <Icon icon={ChevronRight} size={5} intent="low" />
      </Box>
    </Card>
  );
};

export interface RaceTimeColumnProps {
  date?: string;
  time: string;
  relativeTime?: string;
  isLive?: boolean;
}

export const RaceTimeColumn = ({ date, time, relativeTime, isLive }: RaceTimeColumnProps) => (
  <Box width="5rem" textAlign="center" flexShrink={0}>
    {date && <Text size="xs" variant="low" uppercase block>{date}</Text>}
    <Text size="lg" weight="bold" variant="high" block>{time}</Text>
    <Text size="xs" variant={isLive ? 'success' : 'low'} block uppercase>
      {isLive ? 'LIVE' : relativeTime}
    </Text>
  </Box>
);

export interface RaceInfoProps {
  title: string;
  subtitle: string;
  badge?: ReactNode;
  meta?: ReactNode;
}

export const RaceInfo = ({ title, subtitle, badge, meta }: RaceInfoProps) => (
  <Box flex={1} minWidth="0">
    <Box display="flex" alignItems="start" justifyContent="between" gap={4}>
      <Box minWidth="0">
        <Heading level={3} truncate>{title}</Heading>
        <Text size="sm" variant="low" block marginTop={1}>{subtitle}</Text>
        {meta && <Box marginTop={2}>{meta}</Box>}
      </Box>
      {badge && <Box flexShrink={0}>{badge}</Box>}
    </Box>
  </Box>
);