import React from "react";
import { storiesOf } from "@storybook/react";
import Examples from "../../storybook-components/Examples";
import Story from "../../storybook-components/Story";
import { PRODUCT_ID } from "../../types";
import { Box } from "../Box";
import { Flex } from "../Flex";
import { ProductIcon } from "./ProductIcon";

const stories = storiesOf("Deprecated/Product Icon", module);
const products = Object.values(PRODUCT_ID);

stories.add("Default", () => (
  <Story title="ProductIcon">
    <Examples>
      {products.map((product) => (
        <Flex className="items-center" key={product}>
          <ProductIcon productId={product} />
          <Box className="ml-4 text-gray-700">
            <code>{product}</code>
          </Box>
        </Flex>
      ))}
    </Examples>
  </Story>
));