"use client";

import { useEffect } from "react";

import { AlertTriangle } from "lucide-react";

import { Button } from "@/components/ui/button";

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {

  useEffect(() => {

    console.error(error);

  }, [error]);

  return (

    <div className="grid min-h-[60dvh] place-items-center px-4">

      <div className="flex max-w-md flex-col items-center gap-4 text-center">

        <div className="grid h-12 w-12 place-items-center rounded-full bg-[color-mix(in_oklch,var(--color-accent-red)_14%,transparent)] text-[var(--color-accent-red)]">

          <AlertTriangle className="h-5 w-5" aria-hidden />

        </div>

        <div className="space-y-1">

          <h2 className="text-base font-semibold">Something went sideways</h2>

          <p className="text-sm text-[var(--color-fg-tertiary)]">

            The dashboard hit an error. Your watches are safe - try reloading the view.

          </p>

        </div>

        <Button onClick={reset} variant="secondary">

          Try again

        </Button>

      </div>

    </div>

  );

}