import * as React from 'react';

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

import { useThemeHooks } from '@redocly/theme/core/hooks';
import { LoginButton as UserMenuLoginButton } from '@redocly/theme/components/UserMenu/LoginButton';

export type MarkdocLoginButtonProps = {
  variant?: ButtonVariant;
  size?: ButtonSize;
  label?: string;
  labelTranslationKey?: string;
};

export function LoginButton({
  variant,
  size,
  label,
  labelTranslationKey,
}: MarkdocLoginButtonProps) {
  const { useUserMenu } = useThemeHooks();
  const { userData, loginUrl } = useUserMenu();

  if (userData?.isAuthenticated) {
    return null;
  }

  return (
    <UserMenuLoginButton
      href={loginUrl || ''}
      variant={variant}
      size={size}
      label={label}
      labelTranslationKey={labelTranslationKey}
      data-component-name="Markdoc/LoginButton"
    />
  );
}