'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { GridItem } from '@/ui/GridItem';
import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
import { TeamLeaderboardPreview } from '@/ui/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}>
      <Box mb={10}>
        <LeaderboardsHero 
          onNavigateToDrivers={onNavigateToDrivers}
          onNavigateToTeams={onNavigateToTeams}
        />
      </Box>

      <Grid cols={12} gap={6}>
        <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>
  );
}