import React from "react";
import "../src/css/main.css";
import { theme } from "../src/css/globalStyle";
import { Flex } from "../src/components/layout/Flex";
import { Box } from "../src/components/layout/Box";
export default {
  title: "Colours"
};

export const Colours = () => (
  <Box m={4}>
    <Flex gap={4}>
      <div>
        {Object.values(theme.color.primary).map((color, index) => {
          return (
            <Flex align="center">
              <Box color={theme.color.grey[600]} mr={2}>
                {(index + 1) * 100}
              </Box>
              <Box w="20px" h="20px" bg={color} />
            </Flex>
          );
        })}
      </div>

      <div>
        {Object.values(theme.color.grey).map(color => {
          return <Box w="20px" h="20px" bg={color} />;
        })}
      </div>

      <div>
        {Object.values(theme.color.success).map(color => {
          return <Box w="20px" h="20px" bg={color} />;
        })}
      </div>

      <div>
        {Object.values(theme.color.warning).map(color => {
          return <Box w="20px" h="20px" bg={color} />;
        })}
      </div>

      <div>
        {Object.values(theme.color.error).map(color => {
          return <Box w="20px" h="20px" bg={color} />;
        })}
      </div>
    </Flex>
  </Box>
);
