import { Meta, Canvas, Props, Story } from "@storybook/blocks";
import {
  Examples,
  ComponentHeading,
  ComponentStatus,
  COMPONENT_STATUS,
} from "../../storybook-components";
import { PRODUCT_ID } from "../../types";
import { Box } from "../Box";
import { Flex } from "../Flex";
import { ProductIcon } from "./ProductIcon";

export const products = Object.values(PRODUCT_ID);

<Meta
  title="Deprecated/Components/To delete/Product Icon"
  component={ProductIcon}
/>

<ComponentHeading
  componentName="Product Icon"
  description=""
  sourcePath="src/components/ProductIcon/ProductIcon.tsx"
  hideDemosLink
/>

<ComponentStatus status={COMPONENT_STATUS.DEPRECATED} />

```jsx
import { ProductIcon } from "@conveyorhq/arrow-ds";
```

<Canvas>
  <Story name="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>
</Canvas>

## Props

<Props of={ProductIcon} />