import { cva, type VariantProps } from 'class-variance-authority';

export const otpRootVariants = cva('flex-row items-stretch gap-2', {
  variants: {
    size: {
      default: '',
      small: '',
    },
    fullWidth: {
      true: 'w-full self-stretch justify-center',
      false: 'self-start',
    },
  },
  defaultVariants: {
    size: 'default',
    fullWidth: false,
  },
});

/** Narrow cell chrome: overrides Input root `w-full` / wide horizontal padding for one digit. */
export const otpCellVariants = cva(
  [
    'shrink-0 justify-center gap-0',
    // Figma read-only: surface-secondary + stroke-primary + opacity-disabled (text stays content-primary).
    'data-[readonly=true]:opacity-[var(--opacity-disabled)]',
  ],
  {
    variants: {
      size: {
        default: ['w-11 min-w-11 max-w-11 pl-2 pr-2', 'h-14 min-h-14'],
        small: ['w-9 min-w-9 max-w-9 pl-1.5 pr-1.5', 'h-10 min-h-10'],
      },
    },
    defaultVariants: {
      size: 'default',
    },
  },
);

export const otpFieldVariants = cva('min-w-0 w-full text-center tabular-nums font-medium', {
  variants: {
    size: {
      default: 'text-xl leading-6',
      small: 'text-lg leading-[calc(var(--spacing-5)+var(--spacing-0-5))]',
    },
  },
  defaultVariants: {
    size: 'default',
  },
});

export type OtpInputVariantProps = VariantProps<typeof otpRootVariants>;