"use client";
import { Button } from "@/components/ui/button";
import { AlertTriangle } from "lucide-react";

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

export function ErrorBanner({ message = "Something went wrong. Please try again.", onRetry }: ErrorBannerProps) {
  return (
    <div role="alert" aria-live="assertive" className="rounded-2xl border border-destructive/30 bg-destructive/5 p-4 flex items-center gap-3">
      <div className="size-9 rounded-xl bg-destructive/10 flex items-center justify-center shrink-0">
        <AlertTriangle className="size-4 text-destructive" aria-hidden="true" />
      </div>
      <p className="text-sm text-destructive flex-1">{message}</p>
      {onRetry && <Button variant="outline" size="sm" onClick={onRetry} className="rounded-lg shrink-0">Retry</Button>}
    </div>
  );
}