import { FONT_FAMILY_SANS } from '../../../designTokens';

/** Paso activo — círculo naranja (referencia Alta relación laboral). */
export const STEPPER_ACTIVE_BG = '#E8B261';
export const STEPPER_ACTIVE_NUMBER = '#402E0E';

/** Paso completado — círculo menta + borde y check verde. */
export const STEPPER_COMPLETED_FILL = '#D3FFDF';
export const STEPPER_COMPLETED_BORDER = '#0A742C';
export const STEPPER_COMPLETED_ICON = '#0A742C';

export const STEPPER_INACTIVE_BG = '#DDDDDD';
export const STEPPER_LINE = '#C4C4C4';

export const STEPPER_LABEL_ACTIVE = '#29474C';
export const STEPPER_LABEL_INACTIVE = '#5F5F5F';

export const STEPPER_DEFAULT_MAX_WIDTH = 'min(720px, calc(100% - 48px))';

export const STEPPER_CIRCLE_SIZE_PX = 32;

export const STEPPER_STEP_LABEL_STYLE = {
  fontFamily: FONT_FAMILY_SANS,
  fontSize: '14px',
  lineHeight: '21px',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
};

export const STEPPER_CIRCLE_BASE_STYLE = {
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: STEPPER_CIRCLE_SIZE_PX,
  height: STEPPER_CIRCLE_SIZE_PX,
  borderRadius: '50%',
  flexShrink: 0,
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 600,
  fontSize: '14px',
  lineHeight: '21px',
  boxSizing: 'border-box',
};

/** Genera columnas CSS grid: paso | línea | paso | … | paso */
export function getStepperGridTemplateColumns(stepCount) {
  if (stepCount < 1) return 'auto';
  const parts = [];
  for (let i = 0; i < stepCount; i += 1) {
    parts.push('auto');
    if (i < stepCount - 1) parts.push('minmax(0, 1fr)');
  }
  return parts.join(' ');
}
