import React from 'react';
import { Meta } from '@storybook/react';
import colors from '../components/configs/colors';
import ColorSwatch from '../storybookers/ColorSwatch';
import Typography from '../components/Typography/Typography';

export default {
  title: 'Utils / Colors',
  component: ColorSwatch,
} as Meta;

const c = colors;

export const Colors = () => (
  <div>
    <Typography title="Colors" as="h1" styledAs="h4-bold" />
    {Object.keys(c)?.map((colorGroup: string | 'neutrals' | 'darks') => (
      <section>
        <Typography
          title={colorGroup}
          as="h2"
          styledAs="h6-bold"
          theme="mt-6 mb-4"
        />
        <section className="flex flex-wrap gap-8">
          {/* @ts-ignore:next-line */}
          {Object.keys(colors[colorGroup])?.map((k) => {
            return (
              <ColorSwatch colors={colors} colorGroup={colorGroup} k={k} />
            );
          })}
        </section>
      </section>
    ))}
  </div>
);