'use client';

import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Group } from '@/ui/Group';
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 {
  totalDriversLabel: string;
  activeDriversLabel: string;
  totalWinsLabel: string;
  totalRacesLabel: string;
  onViewLeaderboard: () => void;
}

export function DriversDirectoryHeader({
  totalDriversLabel,
  activeDriversLabel,
  totalWinsLabel,
  totalRacesLabel,
  onViewLeaderboard,
}: DriversDirectoryHeaderProps) {
  const stats: DriverStat[] = [
    { label: 'drivers', value: totalDriversLabel, intent: 'primary' },
    { label: 'active', value: activeDriversLabel, intent: 'success' },
    { label: 'total wins', value: totalWinsLabel, intent: 'warning' },
    { label: 'races', value: totalRacesLabel, intent: 'telemetry' },
  ];

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

            <Group direction="row" gap={6} wrap>
              {stats.map((stat, index) => (
                <Group 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>
                </Group>
              ))}
            </Group>
          </Group>

          <Group direction="column" 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>
          </Group>
        </Group>
      </Container>
    </Section>
  );
}