'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 LeagueTabsProps {
  tabs: Tab[];
}

export function LeagueTabs({ tabs }: LeagueTabsProps) {
  return (
    <Box style={{ borderBottom: '1px solid #262626' }}>
      <Stack direction="row" gap={6} style={{ overflowX: 'auto' }}>
        {tabs.map((tab) => (
          <Link
            key={tab.href}
            href={tab.href}
            variant="ghost"
          >
            <Box pb={3} px={1}>
              <span style={{ fontWeight: 500, whiteSpace: 'nowrap' }}>{tab.label}</span>
            </Box>
          </Link>
        ))}
      </Stack>
    </Box>
  );
}
