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

const DuplicateOrdersAlert = () => {
  const {
    duplicateOrders,
    handleDuplicateModal,
    t
  } = useArchivedOrder()
  if (duplicateOrders.length === 0) {
    return null
  }

  return (
    <div className='arcm-bg-white arcm-border arcm-rounded-lg arcm-mb-4 arcm-p-6'>
      <div className='arcm-flex-1'>
        <h3 className='arcm-text-lg arcm-font-semibold arcm-text-[#1F2937] arcm-mb-2'>
          {t('duplicate_orders_detected')}
        </h3>
        <p className='arcm-text-[#111827] arcm-text-sm arcm-leading-relaxed arcm-mb-4'>
          {t('duplicate_unarchive_complete')}
        </p>

        <button
          onClick={handleDuplicateModal}
          className='arcm-inline-flex arcm-items-center arcm-px-4 arcm-py-2 arcm-bg-white arcm-border arcm-border-[#EF4444] arcm-rounded-md arcm-text-sm arcm-font-medium arcm-text-[#EF4444] hover:arcm-bg-red-50 focus:arcm-outline-none focus:arcm-ring-2 focus:arcm-ring-[#EF4444] focus:arcm-ring-offset-2 arcm-transition-colors arcm-duration-200'
        >
          {t('view_fix_duplicate_orders')}
        </button>
      </div>
    </div>
  )
}

export default DuplicateOrdersAlert