import { Button } from "./Button";

export function ErrorBox({ message, onRetry }: { message: string; onRetry?: () => void }) {
  return (
    <div
      role="alert"
      className="flex items-start justify-between gap-4 rounded-lg border border-danger/20 bg-danger-muted px-4 py-3 text-sm text-danger"
    >
      <span className="flex items-start gap-2">
        <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-danger/15 text-[10px] font-bold">
          !
        </span>
        {message}
      </span>
      {onRetry ? (
        <Button variant="danger" size="xs" onClick={onRetry}>
          Try again
        </Button>
      ) : null}
    </div>
  );
}