// @design-system: layout/StickyCTA
// Registered at /design-system#stickycta-layout

import { type ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';

export interface StickyCTAProps {
  /** CTA content — typically a Button or set of buttons */
  children: ReactNode;
  /** Accessible region label */
  ariaLabel?: string;
  /**
   * When false the bar slides out of view (RTL-safe transform).
   * Defaults to true.
   */
  visible?: boolean;
  className?: string;
}

/**
 * StickyCTA — bottom sticky bar for primary deal/page actions.
 *
 * Respects prefers-reduced-motion: the slide animation is suppressed
 * when the user has requested reduced motion.
 *
 * @example
 * <StickyCTA visible={!purchased}>
 *   <Button variant="primary" size="lg" className="w-full" onClick={buy}>
 *     {t('buy_now')}
 *   </Button>
 * </StickyCTA>
 */
export function StickyCTA({ children, ariaLabel, visible = true, className }: StickyCTAProps) {
  const t = useT('sticky_cta');

  return (
    <div
      role="region"
      aria-label={ariaLabel ?? t('region_label')}
      className={cn(
        // Position
        'fixed inset-x-0 z-[var(--z-sticky-top)]',
        'bottom-[calc(var(--bottom-nav-height)+var(--safe-area-bottom))]',
        // Visuals — glass surface
        'bg-surface-glass backdrop-blur-[var(--glass-blur-md)]',
        'border-border-default border-t',
        'shadow-[var(--shadow-glass)]',
        'ps-[var(--safe-area-start)]',
        'pe-[var(--safe-area-end)]',
        // Slide transition — suppressed when prefers-reduced-motion
        'motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-in-out',
        !visible &&
          'motion-safe:translate-y-[calc(100%+var(--bottom-nav-height)+var(--safe-area-bottom))]',
        visible && 'translate-y-0',
        className,
      )}
    >
      <div className="mx-auto w-full max-w-lg px-4 py-3">{children}</div>
    </div>
  );
}