'use client';

import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Section } from '@/ui/Section';
import { Container } from '@/ui/Container';
import { Icon } from '@/ui/Icon';
import { MetricCard } from '@/ui/MetricCard';
import { Trophy, Users, Zap, Flag } from 'lucide-react';
import { Grid } from '@/ui/Grid';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';

interface DriversDirectoryHeaderProps {
  totalDriversLabel: string;
  activeDriversLabel: string;
  totalWinsLabel: string;
  totalRacesLabel: string;
  onViewLeaderboard: () => void;
}

export function DriversDirectoryHeader({
  totalDriversLabel,
  activeDriversLabel,
  totalWinsLabel,
  totalRacesLabel,
  onViewLeaderboard,
}: DriversDirectoryHeaderProps) {
  return (
    <Section variant="dark" padding="lg">
      <Container>
        <Stack direction="col" gap="lg">
          <Stack direction="row" align="center" justify="between">
            <Stack direction="col" gap="xs">
              <Stack direction="row" align="center" gap="md">
                <Icon icon={Users} size={6} intent="primary" />
                <Heading level={1} weight="bold">
                  Driver Directory
                </Heading>
              </Stack>
              <Text size="lg" variant="low">
                The official registry of GridPilot competitors. Tracking performance, 
                reliability, and championship progress across all sanctioned events.
              </Text>
            </Stack>

            <Button
              variant="primary"
              onClick={onViewLeaderboard}
              icon={<Icon icon={Trophy} size={4} />}
            >
              Global Rankings
            </Button>
          </Stack>

          <Grid cols={4} gap="md">
            <Box>
              <MetricCard
                label="Total Registered"
                value={totalDriversLabel}
                icon={Users}
                intent="primary"
              />
            </Box>
            <Box>
              <MetricCard
                label="Active Competitors"
                value={activeDriversLabel}
                icon={Zap}
                intent="success"
              />
            </Box>
            <Box>
              <MetricCard
                label="Career Victories"
                value={totalWinsLabel}
                icon={Trophy}
                intent="warning"
              />
            </Box>
            <Box>
              <MetricCard
                label="Total Race Starts"
                value={totalRacesLabel}
                icon={Flag}
                intent="telemetry"
              />
            </Box>
          </Grid>
        </Stack>
      </Container>
    </Section>
  );
}