// @ts-check
import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import LanguageDropdown from './index.jsx';

test.use({ viewport: { width: 500, height: 500 } });

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'
  }
];

test('LanguageDropdown default', async ({ mount }) => {
  const component = await mount(<LanguageDropdown currentLang={'fr'} languages={languages} altLangs={altLangs} />);
  await expect(component).toHaveCSS('display', 'block');
});