import { Award, ChevronRight } 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 TeamLeaderboardPreviewProps {
  title: string;
  subtitle: string;
  onViewFull: () => void;
  children: ReactNode;
}

export function TeamLeaderboardPreview({
  title,
  subtitle,
  onViewFull,
  children,
}: TeamLeaderboardPreviewProps) {
  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: 'linear-gradient(to bottom right, rgba(250, 204, 21, 0.2), rgba(217, 119, 6, 0.1))', border: '1px solid rgba(250, 204, 21, 0.3)' }}
          >
            <Icon icon={Award} size={5} color="#facc15" />
          </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} />}
        >
          View Full Leaderboard
        </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>
  );
}