'use client';

import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
import { routes } from '@/lib/routing/RouteConfig';
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
import { 
  SharedBox, 
  SharedLink, 
  SharedText, 
  SharedStack,
  SharedContainer,
  SharedIcon
} from '@/components/shared/UIComponents';
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 (
    <SharedContainer size="lg">
      <SharedBox paddingY={8}>
        <SharedStack gap={8}>
          <SharedBox>
            <SharedStack direction="row" align="center" gap={2}>
              <SharedLink href={routes.public.leagues}>
                <SharedText size="sm" color="text-gray-400">Leagues</SharedText>
              </SharedLink>
              <SharedIcon icon={ChevronRight} size={3} color="text-gray-500" />
              <SharedText size="sm" color="text-white">{viewData.name}</SharedText>
            </SharedStack>
          </SharedBox>
          {children}
          {/* ... rest of the template ... */}
        </SharedStack>
      </SharedBox>
    </SharedContainer>
  );
}