import { Meta } from "@storybook/react";
import styles from "./ColorPalette.module.css";

export default {
  title: "Design System/Common Utilities/ColorPalette",
  tags: ["autodocs"],
} as Meta;

export const Default = (): JSX.Element => (
  <>
    <div style={{ display: "flex", flexWrap: "wrap", gap: "1rem" }}>
      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#FFCE33" }}
      >
        #FFCE33
      </div>

      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#EFDF00" }}
      >
        #EFDF00
      </div>
      <div className={styles.colorPalette} style={{ backgroundColor: "#000" }}>
        #000
      </div>
      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#1F2532" }}
      >
        #1F2532
      </div>
      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#3E3F40" }}
      >
        #3E3F40
      </div>
      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#777F91" }}
      >
        #777F91
      </div>
      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#656666" }}
      >
        #656666
      </div>
      <div className={styles.colorPalette} style={{ backgroundColor: "#333" }}>
        #333
      </div>
      <div className={styles.colorPalette} style={{ backgroundColor: "#777" }}>
        #777
      </div>
      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#8C8C8B" }}
      >
        #8C8C8B
      </div>
      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#CCC", color: "#333" }}
      >
        #CCC
      </div>
      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#D9D9D6", color: "#333" }}
      >
        #D9D9D6
      </div>
      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#E6E6EC", color: "#333" }}
      >
        #E6E6EC
      </div>
      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#F2F2F2", color: "#333" }}
      >
        #F2F2F2
      </div>
      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#F9F9FB", color: "#333" }}
      >
        #F9F9FB
      </div>
      <div
        className={styles.colorPalette}
        style={{ backgroundColor: "#FFF", color: "#333" }}
      >
        #FFF
      </div>
    </div>
  </>
);