'use client';

import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
import { routes } from '@/lib/routing/RouteConfig';
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
import { Box } from '@/ui/Box';
import { Link } from '@/ui/Link';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Container } from '@/ui/Container';
import { Icon } from '@/ui/Icon';
import { ChevronRight } from 'lucide-react';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';

export function LeagueDetailTemplate({ viewData, children, tabs }: TemplateProps<LeagueDetailViewData> & { children?: React.ReactNode, tabs?: any[] }) {
  return (
    <Container size="lg">
      <Box paddingY={8}>
        <Stack gap={8}>
          <Box>
            <Stack direction="row" align="center" gap={2}>
              <Link href={routes.public.leagues}>
                <Text size="sm" color="text-gray-400">Leagues</Text>
              </Link>
              <Icon icon={ChevronRight} size={3} color="text-gray-500" />
              <Text size="sm" color="text-white">{viewData.name}</Text>
            </Stack>
          </Box>
          {children}
          {/* ... rest of the template ... */}
        </Stack>
      </Box>
    </Container>
  );
}
