import React from 'react';

import type { JSX } from 'react';

import { Button } from '@redocly/theme/components/Button/Button';
import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
import { useThemeHooks } from '@redocly/theme/core/hooks';

export type NewTabButtonProps = {
  data: string;
  dataTestId?: string;
};

export function NewTabButton({
  data,
  dataTestId = 'new-tab-button',
}: NewTabButtonProps): JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  const onClick = () => {
    window.open(data, '_blank');
  };

  return (
    <div data-component-name="Buttons/NewTabButton">
      <Tooltip
        tip={translate('button.externalLink.tooltipText', 'Open in new tab')}
        placement="top"
        arrowPosition="right"
      >
        <Button
          onClick={onClick}
          icon={<ArrowUpRightIcon />}
          data-testid={dataTestId}
          aria-label="Open in new tab"
          size="small"
          variant="text"
        />
      </Tooltip>
    </div>
  );
}