/**
 * Navigation Component
 * 
 * Admin navigation menu
 * 
 * @package ThinkRank
 * @since 1.0.0
 */

import { __ } from '@wordpress/i18n';
import { TabPanel } from '@wordpress/components';

/**
 * Navigation Component
 */
const Navigation = ({ currentPage, onPageChange, capabilities }) => {
    const tabs = [
        {
            name: 'dashboard',
            title: __('Dashboard', 'thinkrank'),
            className: 'nav-tab-dashboard',
        },
        {
            name: 'content-brief',
            title: __('Content Brief', 'thinkrank'),
            className: 'nav-tab-content-brief',
            disabled: !capabilities.edit_posts,
        },
        {
            name: 'settings',
            title: __('Settings', 'thinkrank'),
            className: 'nav-tab-settings',
            disabled: !capabilities.manage_settings,
        },

        {
            name: 'analytics',
            title: __('Usage Analytics', 'thinkrank'),
            className: 'nav-tab-analytics',
            disabled: !capabilities.view_analytics,
        },
    ];

    return (
        <div className="thinkrank-navigation">
            <TabPanel
                className="thinkrank-tab-panel"
                activeClass="nav-tab-active"
                tabs={tabs.filter(tab => !tab.disabled)}
                initialTabName={currentPage}
                onSelect={onPageChange}
            >
                {() => null}
            </TabPanel>
        </div>
    );
};

export default Navigation;