import iconTwig from './icon.twig';
import iconData from './icon.yml';
import './icon.js';

/**
 * Storybook Definition.
 */
export default {
  title: 'Components/Icon',
};

export const icon = (args) => {
  let data = Object.assign(iconData ?? {}, args);

  return iconTwig({
    icon_name: data.icon
  });
};
icon.argTypes = {
  icon: {
    options: [...iconData.icons],
    control: {
      type: 'select',
    },
  }
}
icon.args = {
  icon: iconData.icons[0]
}

export const all = () => {
  let icons = [];

  iconData.icons.forEach(icon => {
    icons.push(
      `<div style="font-size: 4rem;">${
        iconTwig({
          icon_name: icon,
        })}
        <div style="font-size: 1rem;">${ icon }</div>
      </div>`
    );
  });

  return `<div style="display:flex; flex-wrap: wrap; gap: 40px;">${ icons.join('') }</div>`;
}
