/**
 * Centralized skeleton configuration for consistent sizing and styling across skeleton components.
 */

// Avatar sizes - used for avatar/profile picture skeletons
export const AVATAR_SIZES = {
  xs: 'w-6 h-6',
  sm: 'w-8 h-8',
  md: 'w-10 h-10',
  lg: 'w-12 h-12',
  xl: 'w-16 h-16',
} as const;

// Avatar sizes for md breakpoint (responsive)
export const AVATAR_SIZES_MD = {
  xs: 'md:w-8 md:h-8',
  sm: 'md:w-10 md:h-10',
  md: 'md:w-12 md:h-12',
  lg: 'md:w-14 md:h-14',
  xl: 'md:w-20 md:h-20',
} as const;

// Icon sizes - used for icon skeletons (generally larger than avatars)
export const ICON_SIZES = {
  sm: 'w-8 h-8',
  md: 'w-12 h-12',
  lg: 'w-16 h-16',
  xl: 'w-20 h-20',
} as const;

// Shape classes - used for border radius
export const SKELETON_SHAPES = {
  circle: 'rounded-full',
  square: 'rounded-none',
  rounded: 'rounded-xl',
  'rounded-lg': 'rounded-lg',
} as const;

// Base skeleton classes
export const SKELETON_BASE = 'animate-pulse';
export const SKELETON_BG = 'bg-slate-200';
export const SKELETON_BG_DARK = 'bg-slate-300';

// Type exports for component props
export type AvatarSize = keyof typeof AVATAR_SIZES;
export type IconSize = keyof typeof ICON_SIZES;
export type SkeletonShape = keyof typeof SKELETON_SHAPES;

// Player item size configurations
export const PLAYER_ITEM_SIZE_CONFIG = {
  sm: {
    container: 'p-2',
    pill: 'w-8 h-8',
    nameWidth: 'w-24',
    nameHeight: 'h-3',
    levelWidth: 'w-12',
    levelHeight: 'h-3',
    spacing: 'space-x-2',
  },
  md: {
    container: 'p-3',
    pill: 'w-10 h-10',
    nameWidth: 'w-32',
    nameHeight: 'h-4',
    levelWidth: 'w-16',
    levelHeight: 'h-4',
    spacing: 'space-x-3',
  },
  lg: {
    container: 'p-4',
    pill: 'w-12 h-12',
    nameWidth: 'w-36',
    nameHeight: 'h-5',
    levelWidth: 'w-20',
    levelHeight: 'h-5',
    spacing: 'space-x-4',
  },
} as const;

export type PlayerItemSize = keyof typeof PLAYER_ITEM_SIZE_CONFIG;