import { UIMCControlButton } from "@ui-marcom/react/control-button";
import "./LinkBtn.scss";
import "../../SlideNavigation/SlideNavigation.scss";

import { useTabs } from "../../../services/tabs";

/**
 * Standalone "open external link" control button, styled like the
 * SlideNavigation menu button. Not a registry element (no index.js/schema.js)
 * and currently not imported anywhere in `src` - kept here for the pattern
 * used inline by SlideNavigation's own `link`/`visibleLink` buttons.
 *
 * @param {Object} props
 * @param {string} props.link - URL opened in a new tab via {@link useTabs}.
 */
export const LinkBtn = ({ link }) => {
  const { openTab } = useTabs();
  return (
    <div>
      <UIMCControlButton
        className="rotate slide-navigation__button slide-navigation__button--menu"
        variant="standard"
        size="medium"
        icon="arrow-exit"
        title="Zurück"
        onClick={() => openTab(link)}
      />
    </div>
  );
};