'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Breadcrumbs } from '@/ui/Breadcrumbs';
import { LeagueTabs } from '@/components/leagues/LeagueTabs';
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';

interface Tab {
  label: string;
  href: string;
  exact?: boolean;
}

interface LeagueDetailTemplateProps {
  viewData: LeagueDetailViewData;
  tabs: Tab[];
  children: React.ReactNode;
}

export function LeagueDetailTemplate({
  viewData,
  tabs,
  children,
}: LeagueDetailTemplateProps) {
  return (
    <Container size="lg" py={6}>
      <Stack gap={6}>
        <Breadcrumbs
          items={[
            { label: 'Home', href: '/' },
            { label: 'Leagues', href: '/leagues' },
            { label: viewData.name },
          ]}
        />

        <Box>
          <Heading level={1}>{viewData.name}</Heading>
          <Text color="text-gray-400" block mt={2}>
            {viewData.description}
          </Text>
        </Box>

        <LeagueTabs tabs={tabs} />

        <Box>
          {children}
        </Box>
      </Stack>
    </Container>
  );
}