"use client";

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

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

export function SubscriptionCtaButton({
  children,
  isLoading = false,
  className,
  disabled,
  ...rest
}: SubscriptionCtaButtonProps) {
  const classes = [
    "inline-flex min-h-[clamp(48px,9.63vw,52px)] w-full cursor-pointer items-center justify-center rounded-full border-0 bg-[linear-gradient(269deg,#ff67e0_0%,rgba(254,104,224,0.5)_20%,rgba(252,105,223,0.79)_66%,#f96ade_100%),linear-gradient(#f657a0,#f657a0)] px-(--responsive-card-padding,var(--spacing-lg)) text-(length:--responsive-body,var(--font-size-lg)) font-semibold text-white opacity-85 shadow-[0_5px_7px_0_rgba(247,89,168,0.31)] transition-[filter,transform,opacity] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-50",
    className,
  ]
    .filter(Boolean)
    .join(" ");
  return (
    <button
      {...rest}
      type="button"
      disabled={disabled || isLoading}
      className={classes}
    >
      <span className="inline-flex flex-auto items-center justify-center gap-sm text-center">
        {isLoading ? (
          <span
            className="inline-block size-[clamp(16px,3.333vw,18px)] animate-spin rounded-full border-2 border-solid border-white border-r-transparent border-b-transparent border-l-transparent"
            aria-hidden="true"
          />
        ) : null}
        {children}
      </span>
    </button>
  );
}