'use client';

import { Button } from '@/ui/Button';
import { DecorativeBlur } from '@/ui/DecorativeBlur';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Award, Trophy, Users } from 'lucide-react';

interface LeaderboardsHeroProps {
  onNavigateToDrivers: () => void;
  onNavigateToTeams: () => void;
}

export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: LeaderboardsHeroProps) {
  return (
    <Surface 
      variant="muted" 
      rounded="xl" 
      border 
      padding={8} 
      position="relative" 
      overflow="hidden" 
      bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))" 
      borderColor="var(--ui-color-border-default)"
    >
      <DecorativeBlur color="blue" size="lg" position="top-right" opacity={10} />
      <DecorativeBlur color="purple" size="md" position="bottom-left" opacity={5} />

      <Stack position="relative" zIndex={10}>
        <Stack direction="row" align="center" gap={4} marginBottom={4}>
          <Surface 
            padding={3} 
            bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.05))" 
            border 
            borderColor="rgba(25, 140, 255, 0.3)"
            rounded="xl"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <Icon icon={Award} size={7} intent="primary" />
          </Surface>
          <Stack>
            <Heading level={1} weight="bold">Leaderboards</Heading>
            <Text variant="low" block marginTop={1} size="sm" uppercase weight="bold">Precision Performance Tracking</Text>
          </Stack>
        </Stack>

        <Text 
          size="lg" 
          variant="low" 
          block 
          marginBottom={8} 
          leading="relaxed" 
          maxWidth="42rem"
        >
          Track the best drivers and teams across all competitions. Every race counts. Every position matters. Analyze telemetry-grade rankings and performance metrics.
        </Text>

        <Stack direction="row" gap={4} wrap>
          <Button
            variant="primary"
            onClick={onNavigateToDrivers}
            icon={<Icon icon={Trophy} size={4} />}
          >
            Driver Rankings
          </Button>
          <Button
            variant="secondary"
            onClick={onNavigateToTeams}
            icon={<Icon icon={Users} size={4} />}
          >
            Team Rankings
          </Button>
        </Stack>
      </Stack>
    </Surface>
  );
}