'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Link } from '@/ui/Link';

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

interface LeagueNavTabsProps {
  tabs: Tab[];
  currentPathname: string;
}

export function LeagueNavTabs({ tabs, currentPathname }: LeagueNavTabsProps) {
  return (
    <Box as="nav" borderBottom borderColor="zinc-800" mb={6}>
      <Stack as="ul" direction="row" gap={8} overflow="auto" hideScrollbar>
        {tabs.map((tab) => {
          const isActive = tab.exact 
            ? currentPathname === tab.href 
            : currentPathname.startsWith(tab.href);

          return (
            <Box as="li" key={tab.href} position="relative">
              <Link
                href={tab.href}
                variant="ghost"
                pb={4}
                display="block"
                size="sm"
                weight="medium"
                color={isActive ? 'text-blue-500' : 'text-zinc-400'}
                hoverTextColor={isActive ? 'text-blue-500' : 'text-zinc-200'}
                transition
              >
                {tab.label}
              </Link>
              {isActive && (
                <Box 
                  position="absolute" 
                  bottom="0" 
                  left="0" 
                  right="0" 
                  h="0.5" 
                  bg="bg-blue-500" 
                />
              )}
            </Box>
          );
        })}
      </Stack>
    </Box>
  );
}