'use client'

import { useEffect } from '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="flex flex-col items-center justify-center flex-1 gap-4 p-6">
      <div className="text-center space-y-2">
        <h2 className="text-lg font-medium text-foreground">Er is iets misgegaan</h2>
        <p className="text-sm text-muted-foreground max-w-sm">
          {error.message || 'Er is een onverwachte fout opgetreden. Probeer het opnieuw.'}
        </p>
      </div>
      <Button onClick={reset} variant="outline">Probeer opnieuw</Button>
    </div>
  )
}