import React from 'react'
import { FaCheckCircle, FaArrowLeft } from 'react-icons/fa'
import { useNavigate } from 'react-router-dom'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLocalization } from '@/utils/hooks/useLocalization'

interface OrderSuccessProps {
  orderId: string
  onBackToShop: () => void
}

export const OrderSuccess: React.FC<OrderSuccessProps> = ({ orderId, onBackToShop }) => {
  const navigate = useNavigate()
  const { translate } = useLocalization()

  return (
    <div className="max-w-2xl mx-auto text-center">
      <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
        <div className="mb-6">
          <FaCheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
          <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
            {translate('::Public.order.success.title')}
          </h2>

          <p className="text-gray-600 dark:text-gray-300">
            {translate('::Public.order.success.number')}{' '}
            <span className="font-semibold text-blue-600">#{orderId}</span>
          </p>
        </div>

        <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6 dark:border-green-900/60 dark:bg-green-950/30">
          <h3 className="font-semibold text-green-800 mb-2 dark:text-green-300">
            {translate('::Public.order.success.nextSteps')}
          </h3>
          <ul className="text-sm text-green-700 space-y-1 text-left dark:text-green-200">
            <li>• {translate('::Public.order.success.step1')}</li>
            <li>• {translate('::Public.order.success.step2')}</li>
            <li>• {translate('::Public.order.success.step3')}</li>
          </ul>
        </div>

        <div className="flex flex-col sm:flex-row gap-4 items-center justify-center">
          <button
            onClick={() => navigate(ROUTES_ENUM.public.home)}
            className="flex items-center justify-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
          >
            <FaArrowLeft className="w-4 h-4 mr-2" />
            {translate('::Public.notFound.button')}
          </button>
        </div>
      </div>
    </div>
  )
}