export function LoadingSpinner({ size = "medium", text }: { size?: "small" | "medium" | "large", text?: string }) {
  const sizeMap = {
    small: "16px",
    medium: "24px",
    large: "32px"
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
      <div
        style={{
          width: sizeMap[size],
          height: sizeMap[size],
          border: `${parseInt(sizeMap[size]) / 4}px solid rgba(255, 255, 255, 0.2)`,
          borderTopColor: "currentColor",
          borderRadius: "50%",
          animation: "spin 0.8s linear infinite"
        }}
      ></div>
      {text && <span style={{ color: "var(--text-muted)", fontSize: "0.9rem" }}>{text}</span>}
      <style>{`
        @keyframes spin {
          to { transform: rotate(360deg); }
        }
      `}</style>
    </div>
  );
}