<template>
  <SfTopBar class="topbar">
    <template #left>
      <SfButton
        data-cy="top-bar-btn_faq"
        class="sf-button--text"
      >
        {{ $t('Help & FAQs') }}
      </SfButton>
    </template>
    <template #center>
      <p>{{ $t('Download') }}</p>
      <SfButton
        data-cy="top-bar-btn_more"
        class="topbar__button sf-button--text"
      >
        {{ $t('Find out more') }}
      </SfButton>
    </template>
    <template #right>
      <LocaleSelector />
    </template>
  </SfTopBar>
</template>

<script>
import { SfButton, SfTopBar } from '@borngroup/lightswitch-storefront-ui-vue';
import LocaleSelector from '../components/LocaleSelector';

export default {
  name: 'TopBar',
  components: {
    SfTopBar,
    SfButton,
    LocaleSelector
  },
  extends: SfTopBar
};
</script>
<style lang="scss" scoped>
@import '@borngroup/lightswitch-storefront-ui-vue/styles.scss';
.topbar {
  position: relative;
  z-index: 2;
  &__button {
    margin: 0 0 0 var(--spacer-xs);
  }
}
</style>
