import React, { ReactNode } from 'react';
import { Box } from './primitives/Box';
import { Text } from './Text';
import { Surface } from './primitives/Surface';
import { Icon } from './Icon';
import { LucideIcon } from 'lucide-react';

export interface LeaderboardPreviewShellProps {
  title: string;
  subtitle?: string;
  icon: LucideIcon;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
  children: ReactNode;
  footer?: ReactNode;
}

export const LeaderboardPreviewShell = ({ 
  title, 
  subtitle, 
  icon, 
  intent = 'primary',
  children,
  footer 
}: LeaderboardPreviewShellProps) => {
  return (
    <Surface variant="default" rounded="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
      <Box padding={6} borderBottom>
        <Box display="flex" alignItems="center" justifyContent="between" marginBottom={4}>
          <Box display="flex" alignItems="center" gap={4}>
            <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
              <Icon icon={icon} size={5} intent={intent} />
            </Box>
            <Box>
              <Text size="lg" weight="bold" variant="high" block>
                {title}
              </Text>
              {subtitle && (
                <Text size="sm" variant="low">
                  {subtitle}
                </Text>
              )}
            </Box>
          </Box>
        </Box>
      </Box>
      
      <Box>
        {children}
      </Box>
      
      {footer && (
        <Box padding={4} borderTop bg="rgba(255,255,255,0.02)">
          {footer}
        </Box>
      )}
    </Surface>
  );
};