import React from 'react';

import type { JSX } from 'react';

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

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

export function DownloadButton({
  data,
  dataTestId = 'download-button',
}: DownloadButtonProps): JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  return (
    <div data-component-name="Buttons/DownloadButton">
      <Tooltip
        tip={translate('button.download.tooltipText', 'Download description')}
        placement="top"
        arrowPosition="right"
      >
        <a href={data} target="_blank" download rel="noreferrer">
          <Button
            variant="text"
            size="small"
            aria-label="Download"
            icon={<DownloadIcon />}
            data-testid={dataTestId}
          />
        </a>
      </Tooltip>
    </div>
  );
}