import React from 'react'
import BulkActionSection from './BulkActionSection'
import ActionButtonsSection from './ActionButtonsSection'
import ProgressSection from './ProgressSection'
import ExportCompleteSection from './ExportCompleteSection'
import DuplicateOrdersAlert from './DuplicateOrdersAlert'
import ItemsPerPageSection from './ItemsPerPageSection'
import SearchFilterSection from './SearchFilterSection'
import ClearFilterSection from './ClearFilterSection'
import TableHeader from './TableHeader'

const ArchivedOrderToolbar = () => {
  return (
    <div className='arcm-sticky arcm-top-[35px] arcm-bg-[#f0f0f1] arcm-z-10 arcm-shadow-sm'>
      <div className='arcm-flex arcm-flex-wrap arcm-justify-between arcm-mb-5'>
        <BulkActionSection />
        <ActionButtonsSection />
      </div>
      
      <ProgressSection />
      <ExportCompleteSection />
      <DuplicateOrdersAlert />
      
      <div className='arcm-flex arcm-gap-4 arcm-flex-wrap arcm-items-center arcm-justify-between arcm-mb-4'>
        <ItemsPerPageSection />
        <SearchFilterSection />
      </div>
      
      <ClearFilterSection />
      <TableHeader />
    </div>
  )
}

export default ArchivedOrderToolbar