'use client';

import React from 'react';
import { Users, ChevronLeft } from 'lucide-react';
import { Container } from '@/ui/Container';
import { PageHeader } from '@/ui/PageHeader';
import { TeamLeaderboardTable } from '@/components/leaderboards/TeamLeaderboardTable';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
import type { TeamRankingsViewData } from '@/lib/view-data/TeamRankingsViewData';

interface TeamRankingsTemplateProps {
  viewData: TeamRankingsViewData;
  searchQuery: string;
  onSearchChange: (query: string) => void;
  onTeamClick?: (id: string) => void;
  onBackToLeaderboards?: () => void;
}

export function TeamRankingsTemplate({
  viewData,
  searchQuery,
  onSearchChange,
  onTeamClick,
  onBackToLeaderboards,
}: TeamRankingsTemplateProps): React.ReactElement {
  return (
    <Container size="lg" spacing="md">
      <PageHeader
        title="Team Leaderboard"
        description="Global rankings of all teams based on performance and consistency"
        icon={Users}
        action={
          onBackToLeaderboards && (
            <Button 
              variant="secondary" 
              onClick={onBackToLeaderboards} 
              icon={<Icon icon={ChevronLeft} size={4} />}
            >
              Back to Leaderboards
            </Button>
          )
        }
      />

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

      <TeamLeaderboardTable 
        teams={viewData.teams.map(t => ({
          ...t,
          totalRaces: t.totalRaces || 0,
          rating: t.rating || 0
        }))} 
        onTeamClick={onTeamClick} 
      />
    </Container>
  );
}