Remove badge

'use client';
import { useRef, useState } from 'react';
import { RemoveBadge, Button, type RemoveBadgeSize } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "size": "md"
  };
  const [visible, setVisible] = useState(true);
  const transferFocus = useRef(false);
  const changeVisibility = (next: boolean, button: HTMLButtonElement) => {
    transferFocus.current = button === button.ownerDocument.activeElement;
    setVisible(next);
  };
  const restoreFocus = (button: HTMLButtonElement | null) => {
    if (button && transferFocus.current) {
      transferFocus.current = false;
      button.focus();
    }
  };
  return visible ? (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      {"Item 1"}
      <RemoveBadge
        ref={restoreFocus}
        aria-label={"Remove Item 1"}
        size={settings.size as RemoveBadgeSize}
        onClick={(event) => changeVisibility(false, event.currentTarget)}
      />
    </span>
  ) : (
    <Button
      ref={restoreFocus}
      variant="outline"
      onClick={(event) => changeVisibility(true, event.currentTarget)}
    >
      {"Add again"}
    </Button>
  );
}