export const colorData = {
  // White and Black
  white: "#ffffff", // White Primary
  black: "#28231F", // Black Primary

  // Greys
  "grey-50": "#F6F5F4", // UI Background Grey UI
  "grey-100": "#F3F0EB", // Background Grey Secondary
  "grey-200": "#EDEBE8", // UI Light Grey UI
  "grey-300": "#EBE6DE", // Residential Grey Primary
  "grey-400": "#DBD7D1", // UI Grey UI
  "grey-500": "#C6BFB7", // Light Grey Secondary
  "grey-800": "#78716B", // Grey Secondary
  "grey-900": "#454142", // Commercial Grey Functional

  // Reds
  "red-100": "#F2E1E1", // Background Red Secondary
  "red-500": "#E3A6B0", // Light Red Secondary
  "red-700": "#EE0000", // Logo Red Primary
  "red-800": "#C70000", // Red Secondary
  "red-900": "#A11515", // Professional Red Functional

  // Blues
  "blue-100": "#EDF0F5", // Background Blue Secondary
  "blue-500": "#A8C9E4", // Light Blue Secondary
  "blue-600": "#5E8ED6", // Splash Blue Functional
  "blue-800": "#476994", // Blue Secondary

  // Greens
  "green-100": "#D9E1E0", // Background Green Secondary
  "green-500": "#B3C4C1", // Light Green Secondary
  "green-600": "#17B56B", // Splash Green Functional
  "green-800": "#416B63", // Green Secondary

  // Yellows
  "yellow-100": "#F9EEDD", // Background Yellow Secondary
  "yellow-500": "#F8E0A0", // Light Yellow Secondary
  "yellow-800": "#F2C242", // Yellow Secondary

  // Purples
  "purple-100": "#E3E2EC", // Background Purple Secondary
  "purple-500": "#BBB9D2", // Light Purple Secondary
  "purple-800": "#716DA2", // Purple Secondary
};

function groupColors(obj) {
  const colorGroups = {};

  for (const key in obj) {
    const [group, subKey] = key.split("-");

    if (subKey && !isNaN(parseInt(subKey))) {
      colorGroups[group] = colorGroups[group] || {};
      colorGroups[group][key] = obj[key];
    } else {
      // For "white" and "black," we include them as-is.
      colorGroups[key] = { [key]: obj[key] };
    }
  }

  return colorGroups;
}

export const colorGroups = groupColors(colorData);
