import type { ComponentProps } from "react";

export function LoadingBorderSpinner({
  className = "",
  ...props
}: ComponentProps<"span">) {
  const hasBorder = className.split(" ").some((c) => c.startsWith("border-"));
  const borderClasses = hasBorder
    ? ""
    : "border-2 border-rose-500/25 border-t-rose-500 dark:border-rose-400/20 dark:border-t-rose-400";

  const hasSize = className
    .split(" ")
    .some(
      (c) => c.startsWith("size-") || c.startsWith("w-") || c.startsWith("h-"),
    );
  const sizeClasses = hasSize ? "" : "size-5";

  return (
    <span
      className={`animate-spin rounded-full inline-block animate-fade-in ${borderClasses} ${sizeClasses} ${className}`.trim()}
      {...props}
    />
  );
}