import { cva } from 'class-variance-authority';

/**
 * PullToRefresh variants.
 *
 * Pulls the indicator down with a translate3d offset. The translate magnitude
 * is driven by an inline `--ptr-translate` CSS custom property set by the
 * component each frame — only that variable is "raw"; classes stay token-only.
 *
 * All visual tokens (color, radius, shadow, z-index, duration) resolve through
 * design-system custom properties.
 */
export const indicatorVariants = cva(
  [
    // Position: fixed at the top of the viewport, centered horizontally.
    'pointer-events-none',
    'fixed top-0 start-1/2',
    'flex items-center justify-center gap-2',
    // Sizing + token-only chrome
    'h-10 min-w-[10rem] px-4',
    'rounded-full',
    'bg-surface-base text-text-primary',
    'shadow-[var(--shadow-md)]',
    // Layered above sticky chrome but below modal/overlay
    'z-[var(--z-overlay)]',
    // Subtle transition for releasing back to 0 — driven by --ptr-duration
    'transition-transform duration-[var(--ptr-duration,0ms)] ease-out',
    // Horizontal centering via translate; vertical translate driven by inline var
    // The translate is applied via inline style; the class only sets the will-change.
    'will-change-transform',
  ],
  {
    variants: {
      state: {
        idle: 'opacity-100',
        refreshing: 'opacity-100',
        hidden: 'opacity-0',
      },
    },
    defaultVariants: { state: 'idle' },
  },
);