import React from 'react';

import type { ButtonVariant, ButtonSize } from '@redocly/theme/components/Button/Button';

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

export type LoginButtonProps = {
  href: string;
  className?: string;
  variant?: ButtonVariant;
  size?: ButtonSize;
  label?: string;
  labelTranslationKey?: string;
  ['data-component-name']?: string;
};

export function LoginButton({
  href,
  className,
  variant = 'primary',
  size = 'medium',
  label,
  labelTranslationKey = 'userMenu.login',
  'data-component-name': componentName = 'UserMenu/LoginButton',
}: LoginButtonProps) {
  const { useTranslate, useTelemetry } = useThemeHooks();
  const { translate } = useTranslate();
  const telemetry = useTelemetry();

  const buttonLabel = label || translate(labelTranslationKey, 'Login');

  return (
    <span data-component-name={componentName} className={className}>
      <Button
        data-translation-key={label ? undefined : labelTranslationKey}
        to={href}
        languageInsensitive
        onClick={() => telemetry.sendLoginButtonClickedMessage()}
        data-testid="login-btn"
        extraClass={className}
        variant={variant}
        size={size}
      >
        {buttonLabel}
      </Button>
    </span>
  );
}