"use client";

import { AlertTriangle } from "lucide-react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Suspense } from "react";
import { Button } from "@/components/ui/button";

function ErrorMessage() {
	const searchParams = useSearchParams();
	const errorMessage = searchParams.get("error");

	// Sanitize error message to prevent XSS
	const sanitizedError = errorMessage
		? errorMessage.replace(/[<>]/g, "")
		: "An authentication error occurred";

	return (
		<div className="rounded-lg bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
			{sanitizedError}
		</div>
	);
}

export default function AuthErrorPage() {
	return (
		<div className="flex items-center justify-center px-4 py-20">
			<div className="w-full max-w-sm space-y-6 rounded-[10px] bg-card p-8 shadow-xl">
				<div className="text-center">
					<AlertTriangle className="h-8 w-8 text-destructive mx-auto mb-3" />
					<h1 className="text-lg font-semibold">Authentication Error</h1>
					<p className="text-sm text-muted-foreground mt-1">
						Something went wrong during sign in
					</p>
				</div>

				<Suspense>
					<ErrorMessage />
				</Suspense>

				<Button variant="outline" asChild className="w-full">
					<Link href="/">Return to timeline</Link>
				</Button>
			</div>
		</div>
	);
}
