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

const ClearFilterSection = () => {
  const {
    isAnyFilterActive,
    handleClearFilter,
    t
  } = useArchivedOrder()
  
  if (!isAnyFilterActive()) {
    return null
  }

  return (
    <div className='arcm-flex arcm-justify-end arcm-mb-4'>
      <button
        onClick={handleClearFilter}
        className='arcm-text-gray-700 arcm-text-sm arcm-font-medium arcm-h-[38px] arcm-px-4 arcm-bg-gray-100 arcm-rounded-lg arcm-flex arcm-items-center arcm-gap-2 arcm-transition-all hover:arcm-bg-gray-200'
      >
        {t('clear_filter')}
        <div className='arcm-w-6 arcm-h-6 arcm-rounded-full arcm-border arcm-border-gray-400 arcm-flex arcm-items-center arcm-justify-center'>
          <svg
            className='arcm-w-3.5 arcm-h-3.5'
            fill='none'
            stroke='#6B7280'
            viewBox='0 0 24 24'
          >
            <path
              strokeLinecap='round'
              strokeLinejoin='round'
              strokeWidth='2'
              d='M6 18L18 6M6 6l12 12'
            />
          </svg>
        </div>
      </button>
    </div>
  )
}

export default ClearFilterSection