import { Award, ChevronRight, LucideIcon } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Button } from './Button';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Stack } from './Stack';
import { Text } from './Text';

interface LeaderboardPreviewShellProps {
  title: string;
  subtitle: string;
  onViewFull: () => void;
  children: ReactNode;
  icon?: LucideIcon;
  iconColor?: string;
  iconBgGradient?: string;
  viewFullLabel?: string;
}

export function LeaderboardPreviewShell({
  title,
  subtitle,
  onViewFull,
  children,
  icon = Award,
  iconColor = "#facc15",
  iconBgGradient = 'linear-gradient(to bottom right, rgba(250, 204, 21, 0.2), rgba(217, 119, 6, 0.1))',
  viewFullLabel = "View Full Leaderboard",
}: LeaderboardPreviewShellProps) {
  return (
    <Box mb={12}>
      {/* Header */}
      <Stack direction="row" align="center" justify="between" mb={4}>
        <Stack direction="row" align="center" gap={3}>
          <Box 
            display="flex" 
            h="11" 
            w="11" 
            alignItems="center" 
            justifyContent="center" 
            rounded="xl" 
            style={{ background: iconBgGradient, border: `1px solid ${iconColor}4D` }}
          >
            <Icon icon={icon} size={5} color={iconColor} />
          </Box>
          <Box>
            <Heading level={2}>{title}</Heading>
            <Text size="sm" color="text-gray-500">{subtitle}</Text>
          </Box>
        </Stack>

        <Button
          variant="secondary"
          onClick={onViewFull}
          icon={<Icon icon={ChevronRight} size={4} />}
        >
          {viewFullLabel}
        </Button>
      </Stack>

      {/* Compact Leaderboard */}
      <Box rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline/80" overflow="hidden">
        <Stack gap={0}>
          {children}
        </Stack>
      </Box>
    </Box>
  );
}