import React from 'react'
import { useArchivedOrder } from '../../context/ArchivedOrderContext'

const TableHeader = () => {
  const {
    selectAll,
    handleSelectAll,
    t
  } = useArchivedOrder()
  return (
    <div className='arcm-overflow-hidden arcm-pb-4'>
      <table className='arcm-min-w-full arcm-mt-0 arcm-table-fixed'>
        <colgroup>
          <col className='arcm-w-12' />
          <col className='arcm-w-24' />
          <col className='arcm-w-32' />
          <col className='arcm-w-48' />
          <col className='arcm-w-32' />
          <col className='arcm-w-32' />
        </colgroup>
        <thead>
          <tr>
            <th className='arcm-border-0 arcm-w-12 arcm-px-6 arcm-py-5 arcm-bg-blue-100 first:arcm-rounded-tl-lg'>
              <input
                type='checkbox'
                checked={selectAll}
                onChange={handleSelectAll}
                className='arcm-rounded arcm-border-gray-400 !arcm-bg-transparent'
              />
            </th>
            <th className='arcm-bg-blue-100 arcm-border-0 arcm-px-6 arcm-py-5 arcm-text-left arcm-text-sm arcm-font-semibold arcm-text-gray-900'>
              {t('order')}
            </th>
            <th className='arcm-bg-blue-100 arcm-border-0 arcm-px-6 arcm-py-5 arcm-text-left arcm-text-sm arcm-font-semibold arcm-text-gray-900'>
              {t('date')}
            </th>
            <th className='arcm-bg-blue-100 arcm-border-0 arcm-px-6 arcm-py-5 arcm-text-left arcm-text-sm arcm-font-semibold arcm-text-gray-900'>
              {t('customer')}
            </th>
            <th className='arcm-bg-blue-100 arcm-border-0 arcm-px-6 arcm-py-5 arcm-text-left arcm-text-sm arcm-font-semibold arcm-text-gray-900'>
              {t('order_status')}
            </th>
            <th className='arcm-bg-blue-100 arcm-border-0 arcm-px-6 arcm-py-5 arcm-text-sm arcm-font-semibold arcm-text-gray-900 arcm-text-right last:arcm-rounded-tr-lg'>
              {t('archive_action')}
            </th>
          </tr>
        </thead>
      </table>
    </div>
  )
}

export default TableHeader