'use client';

import { cn } from '@/lib/utils';
import { VerificationIconGlyph } from '@/lib/verification-icons';

const sizeClasses = {
  xs: 'h-3.5 w-3.5 border',
  sm: 'h-4 w-4 border',
  md: 'h-5 w-5 border-2',
  lg: 'h-6 w-6 border-2'
} as const;

const iconSizeClasses = {
  xs: 'h-2 w-2',
  sm: 'h-2.5 w-2.5',
  md: 'h-3 w-3',
  lg: 'h-3.5 w-3.5'
} as const;

export function VerificationBadge({
  verificationIcon,
  size = 'sm',
  className
}: {
  verificationIcon?: string | null;
  size?: keyof typeof sizeClasses;
  className?: string;
}) {
  return (
    <span
      className={cn(
        'inline-flex items-center justify-center rounded-full border-white bg-[#3390ec] text-white shadow-sm',
        sizeClasses[size],
        className
      )}
      title="Верифицированный пользователь"
      aria-label="Верифицированный пользователь"
    >
      <VerificationIconGlyph slug={verificationIcon} className={iconSizeClasses[size]} />
    </span>
  );
}