{/* Export Tabs */}
        <div className="flex border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-hide">
          <div className="flex min-w-max">
            <button
              onClick={() => setActiveExportTab('json')}
              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors ${
                activeExportTab === 'json'
                  ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500'
                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
              }`}
            >
              <Braces className="h-4 w-4" />
              JSON
            </button>
            <button
              onClick={() => setActiveExportTab('php')}
              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors ${
                activeExportTab === 'php'
                  ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500'
                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
              }`}
            >
              <Code className="h-4 w-4" />
              PHP
            </button>
          </div>
        </div>