import { TabConfig } from '@/app/(root)/me/v2/LibraryV2Client';
import Link from '@/components/link/Link';

interface LibraryTabsProps {
  tabs: TabConfig[];
  activeTab: TabConfig;
}

export default function LibraryTabs({ tabs, activeTab }: LibraryTabsProps) {
  return (
    <div className='px-4'>
      <div className='scrollbar-hide flex w-full items-center overflow-x-auto border-b border-border-primary'>
        {tabs.map((tab) => (
          <Link
            key={tab.key}
            href={tab.href}
            className={`group relative flex h-10 cursor-pointer items-center justify-center px-4 text-sm font-medium whitespace-nowrap transition-colors ${
              activeTab.key === tab.key
                ? 'text-foreground-primary'
                : 'text-foreground-secondary hover:text-foreground-primary'
            }`}
          >
            {tab.label}
            <div
              className={`absolute right-0 bottom-0 left-0 h-0.5 bg-foreground-primary transition-opacity ${
                activeTab.key === tab.key ? 'block' : 'hidden'
              }`}
            />
          </Link>
        ))}
      </div>
    </div>
  );
}