"use client";

import React from "react";
import { AlertCircle, RefreshCcw } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";

interface ErrorDisplayProps {
  title?: string;
  message?: string;
  error?: Error | string;
  onRetry?: () => void;
}

export const ErrorDisplay = ({
  title = "Fehler aufgetreten",
  message,
  error,
  onRetry,
}: ErrorDisplayProps) => {
  const router = useRouter();
  const errorMessage = typeof error === "string" ? error : error?.message || message || "Ein unerwarteter Fehler ist aufgetreten.";

  const handleRetry = () => {
    if (onRetry) {
      onRetry();
    } else {
      router.refresh();
    }
  };

  return (
    <div className="flex flex-col items-center justify-center p-8 min-h-[300px] space-y-6">
      <Alert variant="destructive" className="max-w-xl rounded-md border-red-200 bg-red-50 dark:bg-red-950/10 dark:border-red-900/30">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle className="font-bold">{title}</AlertTitle>
        <AlertDescription className="mt-2 text-sm opacity-90">
          {errorMessage}
        </AlertDescription>
      </Alert>
      
      <div className="flex items-center gap-3">
        <Button 
          variant="outline" 
          onClick={handleRetry}
          className="rounded-md h-9 gap-2 transition-all active:scale-95"
        >
          <RefreshCcw className="h-3.5 w-3.5" />
          Erneut versuchen
        </Button>
        <Button 
          variant="ghost" 
          onClick={() => router.back()}
          className="rounded-md h-9 text-muted-foreground"
        >
          Zurück
        </Button>
      </div>
    </div>
  );
};