/**
 * ProRank SEO Meta Box Shell
 *
 * Main container component for the post editor meta box.
 */

import { __ } from '@wordpress/i18n';
import { TabPanel } from '@wordpress/components';
import MetaTabContent from './MetaTabContent.jsx';
import SocialTabContent from './SocialTabContent.jsx';
import InternalLinksTabContent from './InternalLinksTabContent.jsx';

const MetaBoxShell = () => {
  const metaboxData = window.prorankMetaboxData || { postId: 0 };

  const tabs = [
    {
      name: 'meta',
      title: __('Meta', 'prorank-seo'),
      className: 'prorank-tab-meta',
      content: MetaTabContent,
    },
    {
      name: 'social',
      title: __('Social', 'prorank-seo'),
      className: 'prorank-tab-social',
      content: SocialTabContent,
    },
    {
      name: 'internal-links',
      title: __('Internal Links', 'prorank-seo'),
      className: 'prorank-tab-internal-links',
      content: InternalLinksTabContent,
    },
  ];

  return (
    <div className="prorank-metabox-shell">
      <TabPanel
        className="prorank-metabox-tabs"
        activeClass="is-active"
        tabs={tabs.map((tab) => ({
          name: tab.name,
          title: tab.title,
          className: tab.className,
        }))}
      >
        {(tab) => {
          const TabContent = tabs.find((t) => t.name === tab.name)?.content;
          return (
            <div className="prorank-tab-content">
              {TabContent && <TabContent postId={metaboxData.postId} />}
            </div>
          );
        }}
      </TabPanel>
    </div>
  );
};

export default MetaBoxShell;