import React from "react";
import { AlertTriangle, RefreshCcw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface InlineErrorProps {
  message: string;
  onRetry?: () => void;
  className?: string;
}

/**
 * InlineError provides a non-intrusive way to display failures within components.
 * It includes an optional retry trigger and follows the uncodixfy aesthetic.
 */
export function InlineError({
  message,
  onRetry,
  className,
}: InlineErrorProps) {
  return (
    <div className={cn(
      "flex flex-col items-center justify-center py-8 px-4 text-center rounded-xl border border-red-200 bg-red-50 text-red-900",
      className
    )}>
      <div className="size-10 rounded-full bg-red-100 flex items-center justify-center mb-3">
        <AlertTriangle className="size-5 text-red-600" />
      </div>
      <h4 className="text-sm font-bold mb-1">Hoppla! Etwas ist schief gelaufen</h4>
      <p className="text-xs text-red-700/80 mb-4 max-w-xs">
        {message}
      </p>
      {onRetry && (
        <Button 
          variant="outline" 
          size="sm" 
          onClick={onRetry}
          className="h-8 text-xs font-bold border-red-200 hover:bg-red-100 hover:text-red-900 transition-colors"
        >
          <RefreshCcw className="size-3 mr-1.5" />
          Erneut versuchen
        </Button>
      )}
    </div>
  );
}