'use client';

import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
import { Container } from '@/ui/Container';
import { GridItem } from '@/ui/primitives/GridItem';
import { PageHero } from '@/ui/PageHero';
import { Grid } from '@/ui/primitives/Grid';
import { Trophy, Users } from 'lucide-react';

interface LeaderboardsTemplateProps {
  viewData: LeaderboardsViewData;
  onDriverClick: (id: string) => void;
  onTeamClick: (id: string) => void;
  onNavigateToDrivers: () => void;
  onNavigateToTeams: () => void;
}

export function LeaderboardsTemplate({ 
  viewData,
  onDriverClick,
  onTeamClick,
  onNavigateToDrivers,
  onNavigateToTeams
}: LeaderboardsTemplateProps) {
  return (
    <Container size="lg" py={8}>
      <PageHero
        title="Leaderboards"
        description="Track the best drivers and teams across all competitions. Every race counts. Every position matters. Analyze telemetry-grade rankings and performance metrics."
        icon={Trophy}
        actions={[
          {
            label: 'Driver Rankings',
            onClick: onNavigateToDrivers,
            icon: Trophy,
            variant: 'primary'
          },
          {
            label: 'Team Rankings',
            onClick: onNavigateToTeams,
            icon: Users,
            variant: 'secondary'
          }
        ]}
      />

      <Grid cols={12} gap={6} mt={10}>
        <GridItem colSpan={12} lgSpan={6}>
          <DriverLeaderboardPreview 
            drivers={viewData.drivers} 
            onDriverClick={onDriverClick} 
            onNavigateToDrivers={onNavigateToDrivers} 
          />
        </GridItem>
        <GridItem colSpan={12} lgSpan={6}>
          <TeamLeaderboardPreview 
            topTeams={viewData.teams.map(team => ({
              ...team,
              isRecruiting: false,
              performanceLevel: 'N/A'
            }))} 
            onTeamClick={onTeamClick} 
            onViewFullLeaderboard={onNavigateToTeams} 
          />
        </GridItem>
      </Grid>
    </Container>
  );
}