export const STEP_COLOR_PRESETS = [
  '#EF4444',
  '#F97316',
  '#F59E0B',
  '#EAB308',
  '#84CC16',
  '#22C55E',
  '#10B981',
  '#14B8A6',
  '#06B6D4',
  '#0EA5E9',
  '#3B82F6',
  '#6366F1',
  '#8B5CF6',
  '#A855F7',
  '#D946EF',
  '#EC4899',
  '#F43F5E',
  '#78716C',
  '#6B7280',
  '#64748B',
  '#111827',
  '#92400E',
  '#1E3A5F',
  '#D4AF37',
] as const

function hexToRgb(hex: string) {
  const normalized = hex.replace('#', '')
  const value =
    normalized.length === 3
      ? normalized
          .split('')
          .map((char) => char + char)
          .join('')
      : normalized

  const int = Number.parseInt(value, 16)
  return {
    r: (int >> 16) & 255,
    g: (int >> 8) & 255,
    b: int & 255,
  }
}

export function stepBadgeStyle(color: string) {
  const { r, g, b } = hexToRgb(color)
  return {
    color,
    background: `rgba(${r}, ${g}, ${b}, 0.14)`,
    border: `1px solid rgba(${r}, ${g}, ${b}, 0.32)`,
  } as const
}
