import BackToHomeLink from '@/Components/BackToHomeLink';
import { Button, Card } from '@/Components/ui';
import { useForceLightTheme } from '@/lib/theme';
import { Head, Link } from '@inertiajs/react';
import { XCircle } from 'lucide-react';

export default function CheckoutCancel() {
    useForceLightTheme();
    return (
        <>
            <Head title="Checkout canceled" />
            <main className="min-h-screen bg-background text-foreground">
                <div className="mx-auto flex min-h-screen max-w-md flex-col justify-center px-6 py-16">
                    <BackToHomeLink className="mb-10 inline-flex w-fit items-center gap-2 text-[11px] font-medium text-muted-foreground hover:text-accent" />

                    <Card padding="lg" data-testid="checkout-cancel-card">
                        <div className="flex flex-col items-start gap-3">
                            <div className="rounded-full bg-muted p-2 text-muted-foreground">
                                <XCircle
                                    className="h-6 w-6"
                                    strokeWidth={2.5}
                                    aria-hidden
                                />
                            </div>
                            <h1 className="text-xl font-semibold tracking-tight text-foreground">
                                Checkout canceled
                            </h1>
                            <p className="text-sm leading-[1.6] text-muted-foreground">
                                No charges were made. Pick a plan whenever you’re ready.
                            </p>
                            <div className="mt-3 flex w-full flex-col gap-2">
                                <Link href="/pricing" className="block w-full">
                                    <Button variant="primary" className="w-full">
                                        Back to pricing
                                    </Button>
                                </Link>
                                <Link href="/projects" className="block w-full">
                                    <Button variant="ghost" className="w-full">
                                        Go to editor
                                    </Button>
                                </Link>
                            </div>
                        </div>
                    </Card>
                </div>
            </main>
        </>
    );
}
