'use client';

import React from 'react';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { GridItem } from '@/ui/GridItem';
import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
import { LeaderboardsHero } from '@/components/leaderboards/LeaderboardsHero';
import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';

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}>
      <LeaderboardsHero 
        onNavigateToDrivers={onNavigateToDrivers}
        onNavigateToTeams={onNavigateToTeams}
      />

      <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>
  );
}
