import { ChampionshipStandingsList } from '@/components/leagues/ChampionshipStandingsList';
import { routes } from '@/lib/routing/RouteConfig';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { SummaryItem } from '@/ui/SummaryItem';
import { Text } from '@/ui/Text';
import { Award, ChevronRight } from 'lucide-react';

interface Standing {
  leagueId: string;
  leagueName: string;
  position: string;
  points: string;
  totalDrivers: string;
}

interface ChampionshipStandingsProps {
  standings: Standing[];
}

export function ChampionshipStandings({ standings }: ChampionshipStandingsProps) {
  return (
    <Card>
      <Stack direction="row" align="center" justify="between" mb={4}>
        <Heading level={2} icon={<Icon icon={Award} size={5} color="var(--warning-amber)" />}>
          Your Championship Standings
        </Heading>
        <Link href={routes.protected.profileLeagues} variant="primary">
          <Stack direction="row" align="center" gap={1}>
            <Text size="sm">View all</Text>
            <Icon icon={ChevronRight} size={4} />
          </Stack>
        </Link>
      </Stack>
      <ChampionshipStandingsList>
        {standings.map((summary) => (
          <SummaryItem
            key={summary.leagueId}
            title={summary.leagueName}
            subtitle={`Position ${summary.position} • ${summary.points} points`}
            rightContent={
              <Text size="xs" color="text-gray-400">
                {summary.totalDrivers} drivers
              </Text>
            }
          />
        ))}
      </ChampionshipStandingsList>
    </Card>
  );
}