src/app/cancel/page.tsx

"use client";

import { XCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";

export default function CancelPage() {
    return (
        <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 flex items-center justify-center p-6">
            <div className="max-w-md w-full bg-slate-800/50 backdrop-blur-xl rounded-2xl border border-slate-700 p-8 text-center space-y-6">
                <div className="flex justify-center">
                    <XCircle className="h-16 w-16 text-red-500" />
                </div>
                <h1 className="text-2xl font-bold text-white">Pago cancelado</h1>
                <p className="text-slate-300">
                    El proceso de pago fue cancelado. No se ha realizado ningún cargo.
                </p>
                <Link href="/">
                    <Button className="w-full mt-4">Volver al Dashboard</Button>
                </Link>
            </div>
        </div>
    );
}