"use client";

import { cn } from "@area/foundation";
import { type ButtonHTMLAttributes, type ReactNode } from "react";

interface StickyCTAProps {
  /** Primary action button label, e.g. "Continue", "Checkout", "Save". */
  label: string;
  onClick: () => void;
  disabled?: boolean;
  loading?: boolean;
  /** Secondary label (smaller, above the button). Used for prices, totals, or step counters. */
  secondary?: ReactNode;
  className?: string;
  /** Pass-through to the primary <button>. */
  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
}

/**
 * Sticky bottom-bar CTA used for primary completion actions in flows.
 * Honors safe-area-inset-bottom so the button sits above the home indicator on iOS.
 */
export function StickyCTA({
  label,
  onClick,
  disabled,
  loading,
  secondary,
  className,
  buttonProps,
}: StickyCTAProps) {
  return (
    <div
      className={cn(
        "fixed inset-x-0 bottom-0 z-30 border-t border-border bg-background/95 px-4 pt-3 pb-safe backdrop-blur",
        className,
      )}
    >
      {secondary && (
        <p className="mb-2 text-center text-xs text-muted-foreground">{secondary}</p>
      )}
      <button
        type="button"
        disabled={disabled || loading}
        onClick={onClick}
        {...buttonProps}
        className={cn(
          "flex h-12 w-full items-center justify-center rounded-full bg-accent text-sm font-semibold text-background",
          "transition-opacity hover:opacity-95 disabled:opacity-50 disabled:cursor-not-allowed",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
          buttonProps?.className,
        )}
      >
        {loading ? "Working…" : label}
      </button>
    </div>
  );
}