// @design-system: primitives/IconButton
// Registered at /design-system#iconbutton-primitive

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

/**
 * IconButton CVA variant definitions.
 * All colors/sizes/spacing use token-only Tailwind classes.
 */
export const iconButtonVariants = cva(
  [
    'inline-flex items-center justify-center shrink-0',
    'transition-colors',
    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
    'disabled:pointer-events-none disabled:opacity-50',
    'select-none',
  ],
  {
    variants: {
      variant: {
        /** Token bg/text colors with hover state — suitable for surfaces */
        default: [
          'bg-surface-inset text-text-primary',
          'hover:bg-surface-hover',
          'active:bg-neutral-200',
          'focus-visible:ring-brand-primary-500',
        ],
        /** Transparent bg, hover surface — suitable for toolbars on neutral backgrounds */
        ghost: [
          'bg-transparent text-text-primary',
          'hover:bg-surface-hover',
          'active:bg-surface-inset',
          'focus-visible:ring-brand-primary-500',
        ],
        /**
         * Transparent bg that works on brand-coloured TopBar backgrounds.
         * Equivalent to Button's `ghost-inverted`. Text inherits from parent (white).
         */
        'on-brand': [
          'bg-transparent text-inherit',
          'hover:bg-white/15',
          'active:bg-white/25',
          'focus-visible:ring-brand-on-primary',
        ],
        /**
         * Semi-transparent dark overlay — suitable for image carousel controls.
         * Uses `bg-surface-overlay` token (semi-transparent dark overlay).
         */
        overlay: [
          'bg-surface-overlay text-text-inverse',
          'hover:bg-surface-overlay',
          'backdrop-blur-sm',
          'focus-visible:ring-white focus-visible:ring-offset-0',
        ],
      },
      size: {
        sm: 'h-11 w-11',
        md: 'h-11 w-11',
        lg: 'h-12 w-12',
        /** h-11 w-11 — WCAG 2.5.5 / IS 5568 minimum touch target */
        xl: 'h-11 w-11',
      },
      shape: {
        circle: 'rounded-full',
        square: 'rounded-md',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'md',
      shape: 'circle',
    },
  },
);