'use client';

import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';
import { Section } from '@/ui/Section';
import { PageHero } from '@/ui/PageHero';
import { FeatureGrid } from '@/ui/FeatureGrid';
import { Trophy, Users, Activity } from 'lucide-react';
import React from '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 (
    <Section variant="default" padding="lg">
      <PageHero
        title="Global Standings"
        description="Consolidated performance metrics for drivers and teams. Data-driven rankings based on competitive results and technical consistency."
        icon={Activity}
        actions={[
          {
            label: 'Driver Rankings',
            onClick: onNavigateToDrivers,
            icon: Trophy,
            variant: 'primary'
          },
          {
            label: 'Team Standings',
            onClick: onNavigateToTeams,
            icon: Users,
            variant: 'secondary'
          }
        ]}
      />

      <FeatureGrid columns={{ base: 1, lg: 2 }} gap={8}>
        <DriverLeaderboardPreview 
          drivers={viewData.drivers} 
          onDriverClick={onDriverClick} 
          onNavigateToDrivers={onNavigateToDrivers} 
        />
        <TeamLeaderboardPreview 
          topTeams={viewData.teams} 
          onTeamClick={onTeamClick} 
          onViewFullLeaderboard={onNavigateToTeams} 
        />
      </FeatureGrid>
    </Section>
  );
}