'use client';

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

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

export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: LeaderboardsHeroProps) {
  return (
    <Surface 
      variant="muted" 
      rounded="2xl" 
      border 
      padding={8} 
      position="relative" 
      overflow="hidden" 
      bg="bg-gradient-to-br from-yellow-600/20 via-iron-gray to-deep-graphite" 
      borderColor="border-yellow-500/20"
    >
      <DecorativeBlur color="yellow" size="lg" position="top-right" opacity={10} />
      <DecorativeBlur color="blue" size="md" position="bottom-left" opacity={5} />

      <Box position="relative" zIndex={10}>
        <Stack direction="row" align="center" gap={4} mb={4}>
          <Surface 
            variant="muted" 
            rounded="xl" 
            padding={3} 
            bg="bg-gradient-to-br from-yellow-400/20 to-yellow-600/10" 
            border 
            borderColor="border-yellow-400/30"
          >
            <Icon icon={Award} size={7} color="#facc15" />
          </Surface>
          <Box>
            <Heading level={1}>Leaderboards</Heading>
            <Text color="text-gray-400" block mt={1}>Where champions rise and legends are made</Text>
          </Box>
        </Stack>

        <Text 
          size="lg" 
          color="text-gray-400" 
          block 
          mb={6} 
          leading="relaxed" 
          maxWidth="42rem"
        >
          Track the best drivers and teams across all competitions. Every race counts. Every position matters. Who will claim the throne?
        </Text>

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