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

export interface LeaderboardListProps {
  children: ReactNode;
}

export const LeaderboardList = ({ children }: LeaderboardListProps) => {
  return (
    <Box display="flex" flexDirection="col">
      {children}
    </Box>
  );
};

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>
  );
};