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

export interface LeaderboardPreviewShellProps {
  title: string;
  subtitle?: string;
  icon: LucideIcon;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
  children: ReactNode;
  footer?: ReactNode;
  onViewFull?: () => void;
  iconColor?: string;
  iconBgGradient?: string;
  viewFullLabel?: string;
}

export const LeaderboardPreviewShell = ({ 
  title, 
  subtitle, 
  icon, 
  intent = 'primary',
  children,
  footer,
  onViewFull,
  iconColor,
  iconBgGradient,
  viewFullLabel
}: 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={iconBgGradient || "var(--ui-color-bg-surface-muted)"} style={iconColor ? { color: iconColor } : undefined}>
              <Icon icon={icon} size={5} intent={iconColor ? undefined : intent} />
            </Box>
            <Box>
              <Text size="lg" weight="bold" variant="high" block>
                {title}
              </Text>
              {subtitle && (
                <Text size="sm" variant="low">
                  {subtitle}
                </Text>
              )}
            </Box>
          </Box>
          {onViewFull && (
            <Button variant="ghost" size="sm" onClick={onViewFull}>
              {viewFullLabel || 'View Full'}
            </Button>
          )}
        </Box>
      </Box>
      
      <Box>
        {children}
      </Box>
      
      {footer && (
        <Box padding={4} borderTop bg="rgba(255,255,255,0.02)">
          {footer}
        </Box>
      )}
    </Surface>
  );
};