import { Meta, Title, ColorPalette, ColorItem } from "@storybook/addon-docs/blocks"
import tailwindConfig from "@repo/config-tailwind"

<Meta title="Design System/Colors" />

<Title>Colors</Title>

<ColorPalette>
  {Object.entries(tailwindConfig.theme.extend.colors).map(
    ([colorName, colorValue]) => {
      const colors = {}

      if (typeof colorValue === "string") {
        colors[colorName] = colorValue
      } else {
        colors.light = colorValue.DEFAULT
        colors.dark = colorValue.dark
      }

      return (
        <ColorItem
          key={colorName}
          title={colorName}
          colors={colors}
        />
      )
    }

)}

</ColorPalette>
