import { ArrowSize } from '../types';

// Z-index values for various components in the application
export const productListButtonsZIndex = 1004;
export const productListZIndex = 1003;
export const pillZIndex = 1002;
export const videoZIndex = 1001;
export const ugcZIndex = 1000;
export const overlayZIndex = 999;

// Aspect ratio for thumbnails
export const activeSquareAspectRatio = 120;
export const activePortraitAspectRatio = 150;
export const activeStoriesAspectRatio = 213.34;

// Scrolling
export const infiniteScrollTimeout = 50;
export const uniformCarouselTransitionDurationSec = 0.5;
export const spotlightCarouselTransitionDurationSec = 0.5;
export const thumbnailTransitionDurationSec = 0.5;

// Spacing
export const topPillsMarginTopPx = 5;

// Packshot bar height in the mobile player (as a percentage of player height)
export const mobilePlayerPackshotHeightPercent = 15;

// Mobile Player colors
export const pillBackgroundColor = 'rgba(0, 0, 0, 0.2)';
export const pillActiveBackgroundColor = 'rgba(0, 0, 0, 0.6)';
export const pillFontColor = '#FFFFFF';

// Product Carousel
export const productCarouselGap = 15; // px - gap between carousel

// Desktop carousel spacing
export const carouselMaxThumbnailPaddingPx = 5; // max horizontal padding per side when thumbnails are wide

// Partial item width for carousel calculations
export const partialItemWidth = 0.4;

// Arrow dimensions for different sizes
export const ARROW_DIMENSIONS: Record<ArrowSize, { width: number; padding: number }> = {
  nano: { width: 8, padding: 1 },
  micro: { width: 12, padding: 1 },
  small: { width: 16, padding: 2 },
  compact: { width: 20, padding: 2 },
  medium: { width: 26, padding: 3 },
  large: { width: 32, padding: 5 },
} as const;