<template>
  <div class="custom-header">
    <div class="custom-header__left">
      <Logo />
      <NavigationMenu />
    </div>
    <div class="custom-header__right">
      <SearchForm />
      <LanguageSelector />
      <Account />
      <CartIcon />
    </div>
  </div>
</template>

<script setup lang="ts">
import NavigationMenu from './component/NavigationMenu.vue';
import LanguageSelector from '../../shared/components/LanguageSelector.vue';
import CartIcon from './component/Cart.vue';
import Logo from './component/Logo.vue';
import SearchForm from './component/SearchForm.vue';
import Account from './component/Account.vue';
</script>

<style scoped lang="scss">
.custom-header {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;

  .custom-header__left,
  .custom-header__right {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
  }

  .custom-header__right {
    order: 3;
    text-align: right;
  }
}

.header-content {
  padding: 0 12px;
  height: 48px;
  width: min(1280px, 100%);
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
