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

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

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

      <Stack direction="row" align="center" justify="between" gap={4}>
        <Stack direction="row" align="center" gap={4}>
          {icon && (
            <Surface 
              variant="muted" 
              rounded="xl" 
              padding={3} 
              bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.05))" 
              border 
              borderColor="border-primary-blue/20"
            >
              <Icon icon={icon} size={7} color="text-primary-blue" />
            </Surface>
          )}
          <Stack>
            <Heading level={1}>{title}</Heading>
            {description && (
              <Text color="text-gray-400" block mt={1}>
                {description}
              </Text>
            )}
          </Stack>
        </Stack>
        {children}
      </Stack>
    </Stack>
  );
}
