'use client';

import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

import { Button } from '@spoon/ui';

const AppError = ({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) => {
  useEffect(() => {
    Sentry.captureException(error);
  }, [error]);

  return (
    <main className='flex min-h-[50vh] flex-col items-center justify-center gap-4 p-6 text-center'>
      <h1 className='text-2xl font-semibold'>Something went wrong</h1>
      <p className='text-muted-foreground max-w-md text-sm'>
        This page hit an unexpected error. It has been reported.
      </p>
      <Button onClick={() => reset()}>Try again</Button>
    </main>
  );
};

export default AppError;