"use client";

import type { ButtonHTMLAttributes, ReactNode } from "react";

import styles from "./subscription-cta-button.module.css";

export interface SubscriptionCtaButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
  isLoading?: boolean;
}

export function SubscriptionCtaButton({
  children,
  isLoading = false,
  className,
  disabled,
  ...rest
}: SubscriptionCtaButtonProps) {
  const classes = [styles.button, className].filter(Boolean).join(" ");
  return (
    <button
      {...rest}
      type="button"
      disabled={disabled || isLoading}
      className={classes}
    >
      <span className={styles.label}>
        {isLoading ? <span className={styles.spinner} aria-hidden="true" /> : null}
        {children}
      </span>
    </button>
  );
}
