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

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 (
    <Group direction="column" align="stretch" gap={8}>
      {onBack && (
        <Group>
          <Button
            variant="secondary"
            onClick={onBack}
            icon={<Icon icon={ArrowLeft} size={4} />}
          >
            {backLabel}
          </Button>
        </Group>
      )}

      <Group justify="between" gap={4}>
        <Group gap={4}>
          {icon && (
            <Group 
              gap={0}
              justify="center"
            >
              <Icon icon={icon} size={6} intent="primary" />
            </Group>
          )}
          <Group direction="column" align="start" gap={1}>
            <Heading level={1} weight="bold">{title}</Heading>
            {description && (
              <Text variant="low" size="sm">
                {description}
              </Text>
            )}
          </Group>
        </Group>
        <Group>
          {children}
        </Group>
      </Group>
    </Group>
  );
}