import React from 'react';

import type { JSX } from 'react';

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

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

export function EmailButton({ data, dataTestId = 'email-button' }: EmailButtonProps): JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();
  const onClick = () => {
    window.location.href = `mailto:${data}`;
  };

  return (
    <div data-component-name="Buttons/EmailButton">
      <Tooltip
        tip={translate('button.email.tooltipText', 'Send email')}
        placement="top"
        arrowPosition="right"
      >
        <Button
          onClick={onClick}
          icon={<EmailIcon />}
          size="small"
          variant="text"
          data-testid={dataTestId}
          aria-label="Email"
        />
      </Tooltip>
    </div>
  );
}