'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { TeamsTemplate } from '@/templates/TeamsTemplate';
import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
import { routes } from '@/lib/routing/RouteConfig';

interface TeamsPageClientProps {
  viewData: TeamsViewData;
}

export function TeamsPageClient({ viewData }: TeamsPageClientProps) {
  const router = useRouter();
  const [searchQuery, setSearchQuery] = useState('');
  
  const handleTeamClick = (teamId: string) => {
    router.push(`/teams/${teamId}`);
  };
  
  const handleViewFullLeaderboard = () => {
    router.push(routes.team.leaderboard);
  };

  const handleCreateTeam = () => {
    router.push(routes.team.detail('create'));
  };
  
  return (
    <TeamsTemplate
      viewData={viewData}
      searchQuery={searchQuery}
      onSearchChange={setSearchQuery}
      onTeamClick={handleTeamClick}
      onViewFullLeaderboard={handleViewFullLeaderboard}
      onCreateTeam={handleCreateTeam}
    />
  );
}