import { clsx } from 'clsx';
import { ButtonHTMLAttributes, forwardRef } from 'react';

import { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';

/**
 * @deprecated Use `<Button />` component instead with `ButtonProps`.
 */
export type ActionButtonProps = {
  /** @default Priority.PRIMARY */
  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
  /**
   * @deprecated Use `children` instead.
   */
  text?: string;
} & ButtonHTMLAttributes<HTMLButtonElement>;

/**
 * @deprecated Use `<Button v2 size="sm" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead.
 */
const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
  (
    {
      disabled = false,
      className = undefined,
      onClick,
      priority = Priority.PRIMARY,
      text,
      children,
      ...rest
    }: ActionButtonProps,
    reference,
  ) => (
    <button
      ref={reference}
      type="button"
      className={clsx(
        'np-action-btn',
        'np-text-body-default-bold',
        priority === Priority.TERTIARY
          ? 'btn-priority-3'
          : priority === Priority.SECONDARY
            ? 'btn-priority-2'
            : 'btn-priority-1',
        className,
      )}
      disabled={disabled}
      onClick={onClick}
      {...rest}
    >
      {children || text}
    </button>
  ),
);

export default ActionButton;