import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

interface LeaderboardTableShellProps {
  children: React.ReactNode;
  isEmpty?: boolean;
  emptyMessage?: string;
  emptyDescription?: string;
}

export function LeaderboardTableShell({
  children,
  isEmpty,
  emptyMessage = 'No data found',
  emptyDescription = 'Try adjusting your filters or search query',
}: LeaderboardTableShellProps) {
  if (isEmpty) {
    return (
      <Box 
        py={16} 
        textAlign="center" 
        bg="bg-iron-gray/20" 
        border 
        borderColor="border-charcoal-outline" 
        rounded="xl"
      >
        <Text size="4xl" block mb={4}>🔍</Text>
        <Text color="text-gray-400" block mb={2} weight="semibold">{emptyMessage}</Text>
        <Text size="sm" color="text-gray-500">{emptyDescription}</Text>
      </Box>
    );
  }

  return (
    <Box 
      rounded="xl" 
      bg="bg-iron-gray/20" 
      border 
      borderColor="border-charcoal-outline" 
      overflow="hidden"
    >
      {children}
    </Box>
  );
}