import React from 'react';
import styled from 'styled-components';

import type { JSX } from 'react';

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

export type EditPageButtonProps = {
  to: string;
};

export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
  const { useTranslate, useTelemetry } = useThemeHooks();
  const { translate } = useTranslate();
  const telemetry = useTelemetry();

  return (
    <EditPageButtonWrapper data-component-name="Buttons/EditPageButton">
      <Button
        to={to}
        external={true}
        variant="ghost"
        size="small"
        icon={<EditIcon />}
        onClick={() => telemetry.sendEditPageLinkClickedMessage()}
        data-translation-key="markdown.editPage.text"
      >
        {translate('markdown.editPage.text', 'Edit')}
      </Button>
    </EditPageButtonWrapper>
  );
}

const EditPageButtonWrapper = styled.div`
  margin-left: auto;
`;