'use client'

import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { XCircle, ShoppingBag, ArrowRight, HelpCircle } from 'lucide-react'
import Container from '@/components/frontend/Container'

export default function OrderFailedPage() {
  const router = useRouter()

  return (
    <Container className="py-12">
      <div className="max-w-2xl mx-auto text-center">
        <div className="w-24 h-24 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
          <XCircle size={48} className="text-red-600" />
        </div>
        
        <h1 className="text-2xl font-bold text-dark mb-2">Payment Failed</h1>
        <p className="text-gray-custom mb-6">
          We couldn`t process your payment. Please try again or use a different payment method.
        </p>

        <div className="bg-gray-50 rounded-xl p-6 mb-8 text-left">
          <h3 className="font-semibold text-dark mb-3">Common reasons:</h3>
          <ul className="space-y-2 text-sm text-gray-custom">
            <li>• Insufficient balance in account</li>
            <li>• Incorrect payment details entered</li>
            <li>• Bank server timeout or technical issue</li>
            <li>• Transaction limit exceeded</li>
          </ul>
        </div>

        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <button
            onClick={() => router.back()}
            className="inline-flex items-center gap-2 bg-gradient-primary text-white px-6 py-3 rounded-lg font-semibold hover:shadow-md transition"
          >
            Try Again
            <ArrowRight size={18} />
          </button>
          <Link
            href="/cart"
            className="inline-flex items-center gap-2 border border-gray-200 text-dark px-6 py-3 rounded-lg font-semibold hover:border-primary hover:text-primary transition"
          >
            <ShoppingBag size={18} />
            Return to Cart
          </Link>
          <Link
            href="/contact"
            className="inline-flex items-center gap-2 text-gray-custom hover:text-primary transition"
          >
            <HelpCircle size={18} />
            Need Help?
          </Link>
        </div>
      </div>
    </Container>
  )
}