'use client';

import { StandingsList } from '@/components/races/StandingsList';
import { EmptyState } from '@/ui/EmptyState';
import { LoadingWrapper } from '@/ui/LoadingWrapper';
import { useTeamStandings } from "@/hooks/team/useTeamStandings";
import { Box } from '@/ui/Box';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Trophy } from 'lucide-react';

interface TeamStandingsProps {
  teamId: string;
  leagues: string[];
}

export function TeamStandings({ teamId, leagues }: TeamStandingsProps) {
  const { data: standings = [], isLoading: loading } = useTeamStandings(teamId, leagues);

  if (loading) {
    return (
      <Card>
        <LoadingWrapper message="Loading standings..." />
      </Card>
    );
  }

  return (
    <Card>
      <Box mb={6}>
        <Heading level={2}>
          League Standings
        </Heading>
      </Box>
      
      {standings.length > 0 ? (
        <StandingsList standings={standings} />
      ) : (
        <EmptyState
          icon={Trophy}
          title="No standings available"
          description="This team hasn't participated in any leagues yet."
        />
      )}
    </Card>
  );
}