/**
 * AI Tools Page Component
 * 
 * Tabbed interface for AI-powered content tools
 * 
 * @package ThinkRank
 * @since 1.0.0
 */

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

// Import tab components
import ContentPlannerTab from '../ai-tools/ContentPlannerTab';
import MetadataGeneratorTab from '../ai-tools/MetadataGeneratorTab';

/**
 * AI Tools Component
 */
const AITools = () => {
    const tabs = [
        {
            name: 'content-planner',
            title: __('Content Planner', 'thinkrank'),
            className: 'tab-content-planner',
        },
        {
            name: 'metadata-generator',
            title: __('Metadata Generator', 'thinkrank'),
            className: 'tab-metadata-generator',
        },
    ];

    return (
        <div className="thinkrank-ai-tools">
            <TabPanel
                className="thinkrank-ai-tools-tabs"
                activeClass="is-active"
                tabs={tabs}
                initialTabName="content-planner"
            >
                {(tab) => (
                    <div className="thinkrank-min-h-96">
                        {tab.name === 'content-planner' && <ContentPlannerTab />}
                        {tab.name === 'metadata-generator' && <MetadataGeneratorTab />}
                    </div>
                )}
            </TabPanel>
        </div>
    );
};

export default AITools;