"use client";

import { useParams } from "next/navigation";
import { XCircle } from "lucide-react";
import Link from "next/link";

export default function ReservationPayFailedPage() {
  const { token } = useParams<{ token: string }>();

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center px-4">
      <div className="max-w-sm w-full text-center space-y-4">
        <XCircle className="w-16 h-16 text-red-500 mx-auto" />
        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Payment failed</h1>
        <p className="text-sm text-gray-500 dark:text-gray-400">
          Your payment could not be completed. Please try again.
        </p>
        <Link href={`/reserve/pay/${token}`} className="btn-primary inline-block px-6 py-2.5 font-semibold">
          Try again
        </Link>
      </div>
    </div>
  );
}
