/**
 * ModuleNavigationTabs - Reusable in-page tab navigation component
 * Used across Planner, Writer, Linker, Optimizer, Thinker, Automation, Sites modules
 * Follows standard app design system and color scheme
 */

import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import Button from '../ui/button/Button';

export interface NavigationTab {
  label: string;
  path: string;
  icon?: React.ReactNode;
}

interface ModuleNavigationTabsProps {
  tabs: NavigationTab[];
  className?: string;
}

export default function ModuleNavigationTabs({ tabs, className = '' }: ModuleNavigationTabsProps) {
  const location = useLocation();

  // Find active tab based on current path
  const activeTab = tabs.find(tab => {
    if (tab.path === location.pathname) return true;
    // Handle nested routes (e.g., /planner/keywords/123 should match /planner/keywords)
    return location.pathname.startsWith(tab.path + '/');
  });

  const activeTabId = activeTab?.path || tabs[0]?.path || '';

  return (
    <div className={`inline-flex gap-2 p-2 rounded-lg bg-gray-50 dark:bg-gray-800/50 shadow-sm border border-gray-200 dark:border-gray-700 ${className}`}>
      {tabs.map((tab) => {
        const isActive = activeTabId === tab.path || location.pathname.startsWith(tab.path + '/');
        
        return (
          <Link key={tab.path} to={tab.path}>
            <Button
              variant={isActive ? 'primary' : 'secondary'}
              size="sm"
              startIcon={tab.icon}
            >
              {tab.label}
            </Button>
          </Link>
        );
      })}
    </div>
  );
}