'use client'

import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

interface ErrorFallbackProps {
  error: Error
  resetErrorBoundary: () => void
}

export function ErrorFallback({ error, resetErrorBoundary }: ErrorFallbackProps) {
  return (
    <div className="flex min-h-screen items-center justify-center bg-studio-black p-4">
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle className="text-status-error">Something went wrong</CardTitle>
          <CardDescription>
            An unexpected error occurred. Please try again or contact support if the problem persists.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="rounded-md bg-studio-medium p-4">
            <p className="font-mono text-sm text-status-error">{error.message}</p>
            {process.env.NODE_ENV === 'development' && error.stack && (
              <pre className="mt-2 overflow-auto text-xs text-gray-400">{error.stack}</pre>
            )}
          </div>
          <div className="flex gap-2">
            <Button onClick={resetErrorBoundary} variant="phoenix">
              Try Again
            </Button>
            <Button onClick={() => window.location.reload()} variant="outline">
              Reload Page
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

