import type { Meta, StoryObj } from '@storybook/react'

import React from 'react'

import Flex from '@/components/atoms/Flex'
import { colors } from '@/styles/variables'

export default {
  title: 'Documentation/Colors'
} as Meta

export const Colors: StoryObj = {
  render: args => (
    <div style={{ width: '100%' }}>
      <Flex direction={'row'} wrap={'wrap'} gap={'4px'}>
        {colors &&
          Object.keys(colors).map((color, i) => (
            <div
              key={`color-${i}`}
              style={{
                background: `var(--color-${color})`,
                width: '100px',
                height: '75px'
              }}
            >
              <span>{color}</span>
            </div>
          ))}
      </Flex>
    </div>
  ),
  args: {}
}