'use client';

import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Section } from '@/ui/Section';
import { Container } from '@/ui/Container';
import { Card } from '@/ui/Card';
import { Icon } from '@/ui/Icon';
import { Trophy, Users } from 'lucide-react';

interface DriverStat {
  label: string;
  value: string | number;
  intent?: 'primary' | 'success' | 'warning' | 'telemetry';
}

interface DriversDirectoryHeaderProps {
  totalDrivers: number;
  activeDrivers: number;
  totalWins: number;
  totalRaces: number;
  onViewLeaderboard: () => void;
}

export function DriversDirectoryHeader({
  totalDrivers,
  activeDrivers,
  totalWins,
  totalRaces,
  onViewLeaderboard,
}: DriversDirectoryHeaderProps) {
  const stats: DriverStat[] = [
    { label: 'drivers', value: totalDrivers, intent: 'primary' },
    { label: 'active', value: activeDrivers, intent: 'success' },
    { label: 'total wins', value: totalWins.toLocaleString(), intent: 'warning' },
    { label: 'races', value: totalRaces.toLocaleString(), intent: 'telemetry' },
  ];

  return (
    <Section variant="dark" padding="md">
      <Container>
        <Stack direction="row" align="center" justify="between" gap={8}>
          <Stack gap={6}>
            <Stack direction="row" align="center" gap={3}>
              <Card variant="dark">
                <Icon icon={Users} size={6} intent="primary" />
              </Card>
              <Heading level={1}>Drivers</Heading>
            </Stack>
            
            <Text size="lg" variant="low">
              Meet the racers who make every lap count. From rookies to champions, track their journey and see who&apos;s dominating the grid.
            </Text>

            <Stack direction="row" gap={6} wrap>
              {stats.map((stat, index) => (
                <Stack key={index} direction="row" align="center" gap={2}>
                  <Text size="sm" variant="low">
                    <Text as="span" weight="semibold" variant="high">{stat.value}</Text> {stat.label}
                  </Text>
                </Stack>
              ))}
            </Stack>
          </Stack>

          <Stack gap={2} align="center">
            <Button
              variant="primary"
              onClick={onViewLeaderboard}
              icon={<Icon icon={Trophy} size={5} />}
            >
              View Leaderboard
            </Button>
            <Text size="xs" variant="low" align="center">
              See full driver rankings
            </Text>
          </Stack>
        </Stack>
      </Container>
    </Section>
  );
}