import docs from "./pn-marketweb-icon-docs.json";
import * as colors from 'pn-design-assets/pn-assets/colors';
import * as icons from 'pn-design-assets/pn-assets/icons';

export default {
  title: 'Components/Minor/Marketweb icon',
  parameters: {
    notes: docs,
  },
};

export const MarketWebIcon = {
  name: 'marketweb-icon',
  render: args => {
    const pnMarketwebIcon = document.createElement('pn-marketweb-icon');
    pnMarketwebIcon.setAttribute('color', args.color);
    pnMarketwebIcon.setAttribute('small', args.small);
    pnMarketwebIcon.setAttribute('symbol', icons[args.symbol]);
    return pnMarketwebIcon;
  },
  args: {
    symbol: 'shop',
    color: 'black',
    small: false,
  },
  argTypes: {
    symbol: {
      control: 'select',
      options: Object.keys(icons),
    },
    color: {
      control: 'select',
      options: Object.keys(colors),
    },
  },
};
