import React from 'react';
import LanguageDropdown from './index';

export default {
  title: 'Core/Controls/LanguageDropdown',
  component: LanguageDropdown
};

const languages = {
  fr: { label: 'Français', locale: 'fr', heading: 'Langues' },
  en: { label: 'English', locale: 'en', heading: 'Languages' },
  de: { label: 'Deutsch', locale: 'de', heading: 'Sprachen' },
  it: { label: 'Italiano', locale: 'it', heading: 'Lingue' },
  nl: { label: 'Nederlands', locale: 'nl', heading: 'Talen' }
};

const altLangs = [
  {
    lang: 'fr',
    type: 'homepage'
  },
  {
    lang: 'en',
    type: 'homepage'
  },
  {
    lang: 'de',
    type: 'homepage'
  },
  {
    lang: 'it',
    type: 'homepage'
  },
  {
    lang: 'nl',
    type: 'homepage'
  }
];

const Template = args => <LanguageDropdown {...args} />;

export const Default = Template.bind({});
Default.args = {
  currentLang: 'fr',
  altLangs: altLangs,
  languages: languages
};