'use client';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { ChevronRight } from 'lucide-react';
import { usePathname } from 'next/navigation';

export function LeagueDetailTemplate({ viewData, children, tabs }: TemplateProps<LeagueDetailViewData> & { children?: React.ReactNode, tabs?: any[] }) {
  const pathname = usePathname();

  return (
    <Container size="lg">
      <Box paddingY={8}>
        <Stack gap={8}>
          <Box>
            <Stack direction="row" align="center" gap={2}>
              <Link href="/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>

          {/* Tabs */}
          {tabs && tabs.length > 0 && (
            <Box borderBottom borderColor="zinc-800">
              <Box display="flex" gap={8}>
                {tabs.map((tab) => {
                  const isActive = tab.exact 
                    ? pathname === tab.href 
                    : pathname.startsWith(tab.href);
                  
                  return (
                    <Link key={tab.href} href={tab.href} data-testid={`${tab.label.toLowerCase()}-tab`}>
                      <Box 
                        pb={4} 
                        borderBottom={isActive} 
                        borderWidth={isActive ? 2 : 0}
                        borderColor={isActive ? "blue-500" : "transparent"}
                      >
                        <Text 
                          size="sm" 
                          weight={isActive ? "bold" : "medium"} 
                          color={isActive ? "text-white" : "text-zinc-500"}
                          className="transition-colors hover:text-white"
                        >
                          {tab.label}
                        </Text>
                      </Box>
                    </Link>
                  );
                })}
              </Box>
            </Box>
          )}

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