import Link from "next/link"
import { AlertCircle } from "lucide-react"
import { AuthShell } from "@/components/auth/auth-shell"
import { Button } from "@/components/ui/button"

export default async function AuthErrorPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>
}) {
  const params = await searchParams
  return (
    <AuthShell title="Something went wrong" subtitle="We couldn't finish signing you in.">
      <div className="flex flex-col items-center gap-5 text-center">
        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-destructive/10 text-destructive">
          <AlertCircle className="h-6 w-6" aria-hidden="true" />
        </div>
        {params.error && (
          <p className="rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground">
            {params.error}
          </p>
        )}
        <Button asChild className="w-full">
          <Link href="/auth/login">Try signing in again</Link>
        </Button>
      </div>
    </AuthShell>
  )
}