import docs from "./pn-language-selector-docs.json";

export default {
  title: 'Components/Navigation/Language selector',
  parameters: {
    notes: docs,
  },
};

// export const regular = () => {
//   // Storybook Knobs ------------------------------------------//
//   const language = select("Language", {
//     'Enlish':'en',
//     'Swedish': 'sv',
//     'Danish': 'da',
//     'Finnish': 'fi',
//     'Norwegian': 'no'
//   }, 'sv');

// --------------------------------------------------------- //

const Template = ({ ...args }) => {
  return `
    <div style="display:flex; justify-content: space-between;">
    <pn-language-selector value=${args.language}>
      <pn-language-selector-option name="Example language 1" code="langcode1" selected="false" url="test"></pn-language-selector-option>
      <pn-language-selector-option name="No link language" code="langcode2" selected="true"></pn-language-selector-option>
      <pn-language-selector-option name="No link language 2" code="langcode3" selected="false"></pn-language-selector-option>
    </pn-language-selector>

    <pn-language-selector value=${args.language}>
      <pn-language-selector-option name="English" code="en" selected="true" url="/"></pn-language-selector-option>
      <pn-language-selector-option name="Svenska" code="sv" selected="false" url="/en"></pn-language-selector-option>
    </pn-language-selector>
    </div>
  `;
};

export const Primary = Template.bind({});
Primary.args = {
  language: 'sv',
};
