'use client';

import { LeagueChampionshipStats } from '@/components/leagues/LeagueChampionshipStats';
import { StandingsTable } from '@/components/leagues/StandingsTable';
import Card from '@/components/ui/Card';
import type { LeagueStandingsViewData } from '@/lib/view-data/LeagueStandingsViewData';

// ============================================================================
// TYPES
// ============================================================================

interface LeagueStandingsTemplateProps {
  viewData: LeagueStandingsViewData;
  onRemoveMember: (driverId: string) => void;
  onUpdateRole: (driverId: string, newRole: string) => void;
  loading?: boolean;
}

// ============================================================================
// MAIN TEMPLATE COMPONENT
// ============================================================================

export function LeagueStandingsTemplate({
  viewData,
  onRemoveMember,
  onUpdateRole,
  loading = false,
}: LeagueStandingsTemplateProps) {
  if (loading) {
    return (
      <div className="text-center text-gray-400">
        Loading standings...
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Championship Stats */}
      <LeagueChampionshipStats standings={viewData.standings} drivers={viewData.drivers} />

      <Card>
        <h2 className="text-xl font-semibold text-white mb-4">Championship Standings</h2>
        <StandingsTable
          standings={viewData.standings}
          drivers={viewData.drivers}
          memberships={viewData.memberships}
          currentDriverId={viewData.currentDriverId ?? undefined}
          isAdmin={viewData.isAdmin}
          onRemoveMember={onRemoveMember}
          onUpdateRole={onUpdateRole}
        />
      </Card>
    </div>
  );
}