import React from 'react';

import { Button } from '@redocly/theme/components/Button/Button';
import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';

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

export function NewTabButton({
  data,
  dataTestId = 'new-tab-button',
}: NewTabButtonProps): JSX.Element {
  const onClick = () => {
    window.open(data, '_blank');
  };

  return (
    <div data-component-name="Buttons/NewTabButton">
      <Button
        onClick={onClick}
        icon={<ArrowUpRightIcon />}
        data-testid={dataTestId}
        aria-label="Open in new tab"
        size="small"
        variant="text"
      />
    </div>
  );
}