import React from 'react';
import { Text } from '../components/Text';
import { theme } from './theme';

export default {
  title: 'Style',
};

export const Color = () => {
  const allColors = [];
  for (const index in theme.colors) {
    if (typeof theme.colors[index] === 'object') {
      allColors.push(
        theme.colors[index].map((color, i) => (
          <div key={index + i}>
            <Text color={color}>{`${index}.${i}`}</Text>
          </div>
        ))
      );
    } else {
      allColors.push(
        <div key={index}>
          <Text color={theme.colors[index]}>{index}</Text> <br />
        </div>
      );
    }
  }
  return allColors;
};
