'use client';

import { LeagueHeaderPanel } from '@/components/leagues/LeagueHeaderPanel';
import { LeagueNavTabs } from '@/components/leagues/LeagueNavTabs';
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
import { Link } from '@/ui/Link';
import { Box } from '@/ui/primitives/Box';
import { Text } from '@/ui/Text';
import { ChevronRight } from 'lucide-react';
import { usePathname } from 'next/navigation';
import React from 'react';

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

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

export function LeagueDetailTemplate({
  viewData,
  tabs,
  children,
}: LeagueDetailTemplateProps) {
  const pathname = usePathname();

  return (
    <Box minHeight="screen" bg="zinc-950" color="text-zinc-200">
      <Box maxWidth="7xl" mx="auto" px={{ base: 4, sm: 6, lg: 8 }} py={8}>
        {/* Breadcrumbs */}
        <Box as="nav" display="flex" alignItems="center" gap={2} mb={8}>
          <Link href="/" variant="ghost" size="xs" weight="medium">
            <Text size="xs" weight="medium" uppercase letterSpacing="widest">Home</Text>
          </Link>
          <Box color="text-zinc-500"><ChevronRight size={12} /></Box>
          <Link href="/leagues" variant="ghost" size="xs" weight="medium">
            <Text size="xs" weight="medium" uppercase letterSpacing="widest">Leagues</Text>
          </Link>
          <Box color="text-zinc-500"><ChevronRight size={12} /></Box>
          <Text size="xs" weight="medium" color="text-zinc-300" uppercase letterSpacing="widest">{viewData.name}</Text>
        </Box>

        <LeagueHeaderPanel viewData={viewData} />

        <LeagueNavTabs tabs={tabs} currentPathname={pathname} />

        <Box as="main">
          {children}
        </Box>
      </Box>
    </Box>
  );
}