<template>
  <div class="home">
    <home-hero />
    <home-brands />
    <home-collection />
    <home-category-tags />
  </div>
</template>

<script setup lang="ts">
import {useUserActivation} from "~/composables/user";
import { useRouteQuery } from '@vueuse/router';

const {t} = useI18n()
const appStore = useAppStore()
const route = useRoute()

useHead({
  title: t('breadcrumbs.home'),
})

const token = useRouteQuery('token', '')
const uid = useRouteQuery('uid', '')

const { activateUser } = useUserActivation();

onMounted( async () => {
  if (route.path.includes('activate-user') && token.value && uid.value) {
    await activateUser(token.value, uid.value)
  }

  if (route.path.includes('reset-password') && token.value && uid.value) {
    appStore.setActiveState('new-password')
  }
})
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  gap: 125px;
}
</style>