import { Meta } from "@storybook/addon-docs";
import { useDarkMode } from "storybook-dark-mode";
import { colorPaletteList } from "../ColorPalette.js";
import InlineComponent from "./InlineComponent";

<Meta
  title="Foundation/Helpers/Border Color"
  parameters={{
    viewMode: "docs",
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

<style>
  {`
  .story-demo-table tr{
      background: transparent !important;
  }

  `}
</style>

# Border Color
<InlineComponent>
  {() => {
    const isDarkMode = useDarkMode();
    const theme = isDarkMode ? "dark" : "light";
    return (
      <table className="story-demo-table">
        <thead>
        <tr>
          <td></td>
          <td>RGB code</td>
          <td>Class</td>
        </tr>
        </thead>
        <tbody>
        {colorPaletteList(theme).map((color) => {
          return (
            <tr key={color.name}>
              <td>
                <div
                  className={`w-12 h-12 border ${color.name.replace(
                    "--neeto-ui",
                    "neeto-ui-border"
                  )}`}
                ></div>
              </td>
              <td>
                <code>{color.value}</code>
              </td>
              <td>
                <div className="flex justify-between">
                  <code>{`${color.name.replace(
                    "--neeto-ui",
                    "neeto-ui-border"
                  )}`}</code>
                </div>
              </td>
            </tr>
          );
        })}
        </tbody>
      </table>);
  }}
</InlineComponent>
