import React from 'react';
import { ArrowLeft, LucideIcon } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';

interface LeaderboardHeaderProps {
  title: string;
  description?: string;
  icon?: LucideIcon;
  onBack?: () => void;
  backLabel?: string;
  children?: React.ReactNode;
}

export function LeaderboardHeader({
  title,
  description,
  icon,
  onBack,
  backLabel = 'Back',
  children,
}: LeaderboardHeaderProps) {
  return (
    <Box mb={8}>
      {onBack && (
        <Box mb={6}>
          <Button
            variant="secondary"
            onClick={onBack}
            icon={<Icon icon={ArrowLeft} size={4} />}
          >
            {backLabel}
          </Button>
        </Box>
      )}

      <Stack direction="row" align="center" justify="between" gap={4}>
        <Stack direction="row" align="center" gap={4}>
          {icon && (
            <Box 
              p={3} 
              bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.15), rgba(25, 140, 255, 0.05))" 
              border 
              borderColor="border-primary-blue/20"
              rounded="xl"
              display="flex"
              alignItems="center"
              justifyContent="center"
            >
              <Icon icon={icon} size={6} color="text-primary-blue" />
            </Box>
          )}
          <Box>
            <Heading level={1} weight="bold" letterSpacing="tight">{title}</Heading>
            {description && (
              <Text color="text-gray-400" block mt={1} size="sm">
                {description}
              </Text>
            )}
          </Box>
        </Stack>
        <Box>
          {children}
        </Box>
      </Stack>
    </Box>
  );
}
