web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx

/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useState, memo } from 'react';
import PricingFilterModal from '../../modal/PricingFilterModal';
import PricingVendorIntroWithSkeleton from './PricingVendorIntroWithSkeleton';
import SearchActions from './SearchActions';

const PricingTopSection = memo(
  ({
    selectedRowKeys,
    copyText,
    handleChange,
    handleCompositionStart,
    handleCompositionEnd,
    isMobile,
    sidebarProps,
    filterVendor,
    models,
    filteredModels,
    loading,
    searchValue,
    showWithRecharge,
    setShowWithRecharge,
    currency,
    setCurrency,
    showRatio,
    setShowRatio,
    viewMode,
    setViewMode,
    tokenUnit,
    setTokenUnit,
    t,
  }) => {
    const [showFilterModal, setShowFilterModal] = useState(false);

    return (
      <>
        {isMobile ? (
          <>
            <div className='w-full'>
              <SearchActions
                selectedRowKeys={selectedRowKeys}
                copyText={copyText}
                handleChange={handleChange}
                handleCompositionStart={handleCompositionStart}
                handleCompositionEnd={handleCompositionEnd}
                isMobile={isMobile}
                searchValue={searchValue}
                setShowFilterModal={setShowFilterModal}
                showWithRecharge={showWithRecharge}
                setShowWithRecharge={setShowWithRecharge}
                currency={currency}
                setCurrency={setCurrency}
                showRatio={showRatio}
                setShowRatio={setShowRatio}
                viewMode={viewMode}
                setViewMode={setViewMode}
                tokenUnit={tokenUnit}
                setTokenUnit={setTokenUnit}
                t={t}
              />
            </div>
            <PricingFilterModal
              visible={showFilterModal}
              onClose={() => setShowFilterModal(false)}
              sidebarProps={sidebarProps}
              t={t}
            />
          </>
        ) : (
          <PricingVendorIntroWithSkeleton
            loading={loading}
            filterVendor={filterVendor}
            models={filteredModels}
            allModels={models}
            t={t}
            selectedRowKeys={selectedRowKeys}
            copyText={copyText}
            handleChange={handleChange}
            handleCompositionStart={handleCompositionStart}
            handleCompositionEnd={handleCompositionEnd}
            isMobile={isMobile}
            searchValue={searchValue}
            setShowFilterModal={setShowFilterModal}
            showWithRecharge={showWithRecharge}
            setShowWithRecharge={setShowWithRecharge}
            currency={currency}
            setCurrency={setCurrency}
            showRatio={showRatio}
            setShowRatio={setShowRatio}
            viewMode={viewMode}
            setViewMode={setViewMode}
            tokenUnit={tokenUnit}
            setTokenUnit={setTokenUnit}
          />
        )}
      </>
    );
  },
);

PricingTopSection.displayName = 'PricingTopSection';

export default PricingTopSection;