'use client';

import React from 'react';
import { Trophy } from 'lucide-react';
import { Container } from '@/ui/Container';
import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
import { LeaderboardHeader } from '@/components/leaderboards/LeaderboardHeader';
import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
import { LeaderboardPodium } from '@/components/leaderboards/LeaderboardPodium';
import { LeaderboardTable } from '@/components/leaderboards/LeaderboardTable';

interface DriverRankingsTemplateProps {
  viewData: DriverRankingsViewData;
  searchQuery: string;
  onSearchChange: (query: string) => void;
  onDriverClick?: (id: string) => void;
  onBackToLeaderboards?: () => void;
}

export function DriverRankingsTemplate({
  viewData,
  searchQuery,
  onSearchChange,
  onDriverClick,
  onBackToLeaderboards,
}: DriverRankingsTemplateProps): React.ReactElement {
  return (
    <Container size="lg" py={8}>
      <LeaderboardHeader
        title="Driver Leaderboard"
        description="Full rankings of all drivers by performance metrics"
        icon={Trophy}
        onBack={onBackToLeaderboards}
        backLabel="Back to Leaderboards"
      />

      {/* Top 3 Podium */}
      {viewData.podium.length > 0 && !searchQuery && (
        <LeaderboardPodium 
          podium={viewData.podium.map(d => ({
            ...d,
            rating: Number(d.rating),
            wins: Number(d.wins),
            podiums: Number(d.podiums)
          }))} 
          onDriverClick={onDriverClick} 
        />
      )}

      <LeaderboardFiltersBar 
        searchQuery={searchQuery}
        onSearchChange={onSearchChange}
        placeholder="Search drivers..."
      />

      {/* Leaderboard Table */}
      <LeaderboardTable 
        drivers={viewData.drivers.map(d => ({
          ...d,
          rating: Number(d.rating),
          wins: Number(d.wins)
        }))} 
        onDriverClick={onDriverClick} 
      />
    </Container>
  );
}