import React, { ReactNode } from 'react';
import { Box } from './primitives/Box';
import { Surface } from './primitives/Surface';

export interface LeaderboardListProps {
  children: ReactNode;
}

export const LeaderboardList = ({ children }: LeaderboardListProps) => {
  return (
    <Surface variant="muted" rounded="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
      <Box display="flex" flexDirection="col">
        {children}
      </Box>
    </Surface>
  );
};

export const LeaderboardListItem = ({ children, onClick }: { children: ReactNode, onClick?: () => void }) => {
  return (
    <Box 
      padding={4} 
      borderBottom 
      onClick={onClick}
      style={{ cursor: onClick ? 'pointer' : 'default' }}
      className={onClick ? 'hover:bg-white/5 transition-colors' : ''}
    >
      {children}
    </Box>
  );
};
