import { AlertTriangle } from "lucide-react";

import { apiErrorMessage } from "@/client/lib/api";

type Props = { error: unknown; title?: string };

export function ErrorBanner({ error, title = "Something went wrong" }: Props) {
  const message = apiErrorMessage(error);
  return (
    <div
      role="alert"
      className="flex items-start gap-3 rounded-2xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-200"
    >
      <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" strokeWidth={2} aria-hidden="true" />
      <div>
        <p className="font-semibold text-red-100">{title}</p>
        <p className="mt-1 text-red-200/80">{message}</p>
      </div>
    </div>
  );
}