/components/colors/colors

import { prose } from "@hedia/hexui/components/prose";
import { div, p } from "@hedia/html/elements";

const colorGroups = [
  {
    name: "Primary",
    shades: [900, 800, 700, 600, 500, 400, 300, 200, 100],
  },
  {
    name: "Base",
    shades: [900, 800, 700, 600, 500, 400, 300, 200, 100],
  },
  {
    name: "Green",
    shades: [900, 800, 700, 600, 500, 400, 300, 200, 100, 50],
  },
  {
    name: "Red",
    shades: [900, 800, 700, 600, 500, 400, 300, 200, 100, 50],
  },
  {
    name: "Yellow",
    shades: [900, 800, 700, 600, 500, 400, 300, 200, 100, 50],
  },
  {
    name: "Black",
    shades: [900, 800, 700, 600, 500, 400, 300, 200, 100],
  },
  {
    name: "White",
    shades: [900, 800, 700, 600, 500, 400, 300, 200, 100],
  },
  {
    name: "Primary",
    shades: ["900a", "400a", "300a", "100a"],
  },
  {
    name: "Base",
    shades: ["700a", "600a", "100a"],
  },
  {
    name: "Red",
    shades: ["300a"],
  },
];

export function Colors() {
  return [
    ...colorGroups.map((group) =>
      div(
        { style: "margin-bottom: 1rem;" },
        div(
          { style: "display: flex; flex-wrap: wrap;" },
          ...group.shades.map((shade) =>
            div(
              { style: "display: flex; flex-direction: column; gap: 0.25rem;" },
              div({
                style: `width: 5rem; height: 5rem; background-color: var(--color-${group.name.toLowerCase()}-${shade});`,
              }),
              prose(
                { style: "text-align: center;" },
                p({ style: "margin-bottom: 0;" }, group.name),
                p(shade),
              ),
            ),
          ),
        ),
      ),
    ),
  ];
}