import { Meta, Story } from "@storybook/addon-docs";

export const boxShadows = [
  {
    name: "$neeto-ui-shadow-xs",
    value: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
    compiledValue: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
  },
  {
    name: "$neeto-ui-shadow-sm",
    value:
      "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px",
    compiledValue:
      "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px",
  },
  {
    name: "$neeto-ui-shadow-md",
    value:
      "rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px",
    compiledValue:
      "rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px",
  },
  {
    name: "$neeto-ui-shadow-lg",
    value:
      "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
    compiledValue:
      "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
  },
];

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

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

  `}
</style>

# Box Shadows

<table className="story-demo-table">
  <thead>
    <tr>
      <td>Preview</td>
      <td>CSS Variable</td>
      <td>Class</td>
    </tr>
  </thead>
  <tbody>
    {boxShadows.map((shadow) => {
      return (
        <tr key={shadow.name}>
          <td>
            <div className="p-6">
              <div
                className={`w-20 h-20 border bg-white ${shadow.name.replace(
                  "$neeto-ui",
                  "neeto-ui"
                )}`}
              ></div>
            </div>
          </td>
          <td>
            <code>{`${shadow.name.replace("$neeto-ui", "--neeto-ui")}`}</code>
          </td>
          <td>
            <div className="flex justify-between">
              <code>{`${shadow.name.replace("$neeto-ui", "neeto-ui")}`}</code>
            </div>
          </td>
        </tr>
      );
    })}
  </tbody>
</table>
