import React from 'react';

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

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

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

  return (
    <div data-component-name="Buttons/EmailButton">
      <Button
        onClick={onClick}
        icon={<EmailIcon />}
        size="small"
        variant="text"
        data-testid={dataTestId}
        aria-label="Email"
      />
    </div>
  );
}