import { ReactNode } from 'react';
import { Box } from './Box';
import { Surface } from './Surface';
import { Text } from './Text';

export interface ResultRowProps {
  children: ReactNode;
  isHighlighted?: boolean;
}

export const ResultRow = ({ children, isHighlighted }: ResultRowProps) => {
  return (
    <Surface 
      variant={isHighlighted ? 'muted' : 'dark'} 
      rounded="xl" 
      padding={3}
      style={isHighlighted ? { 
        border: '1px solid var(--ui-color-intent-primary)',
        background: 'linear-gradient(to right, rgba(25, 140, 255, 0.1), transparent)'
      } : {}}
    >
      <Box display="flex" alignItems="center" gap={3}>
        {children}
      </Box>
    </Surface>
  );
};

export interface PositionBadgeProps {
  position: number;
}

export const PositionBadge = ({ position }: PositionBadgeProps) => {
  const getIntent = (pos: number) => {
    if (pos === 1) return 'warning';
    if (pos === 2) return 'low';
    if (pos === 3) return 'warning';
    return 'low';
  };

  return (
    <Box 
      width={10} 
      height={10} 
      rounded="lg" 
      display="flex" 
      alignItems="center" 
      justifyContent="center" 
      bg="var(--ui-color-bg-surface-muted)"
      style={{ border: '1px solid var(--ui-color-border-default)' }}
    >
      <Text weight="bold" variant={getIntent(position) as any}>{position}</Text>
    </Box>
  );
};

export interface ResultPointsProps {
  points: number;
}

export const ResultPoints = ({ points }: ResultPointsProps) => (
  <Box padding={2} rounded="lg" bg="rgba(255, 190, 77, 0.05)" style={{ border: '1px solid rgba(255, 190, 77, 0.2)', minWidth: '3.5rem', textAlign: 'center' }}>
    <Text size="xs" variant="low" block>PTS</Text>
    <Text size="sm" weight="bold" variant="warning">{points}</Text>
  </Box>
);