<script setup lang="ts">
import { inject } from 'vue'
import StoreTabItemHitem from '@/views/pages/store/view/StoreTabItemHitem.vue'
import StoreTabItemHoption from '@/views/pages/store/view/StoreTabItemHoption.vue'
import StoreTabItemHprice from '@/views/pages/store/view/StoreTabItemHprice.vue'
import StoreTabItemHstock from '@/views/pages/store/view/StoreTabItemHstock.vue'

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { t } = useI18n()

const item = inject<string>('item')

const currentTab = ref('tab-1')
</script>

<template>
  <VCard>
    <VTabs
      v-model="currentTab"
      grow
      stacked
    >
      <VTab>
        <VIcon
          start
          icon="tabler-shirt-sport"
        />
        {{ $t('Item') }}
      </VTab>

      <VTab>
        <VIcon
          start
          icon="tabler-report-money"
        />
        {{ $t('Option') }}
      </VTab>

      <VTab>
        <VIcon
          start
          icon="tabler-currency-euro"
        />
        {{ $t('Price') }}
      </VTab>

      <VTab>
        <VIcon
          start
          icon="tabler-building-warehouse"
        />
        {{ $t('Stock') }}
      </VTab>
    </VTabs>

    <VCardText style="padding: 5px !important;">
      <VWindow
        v-model="currentTab"
        class="ms-3"
      >
        <VWindowItem value="tab-1">
          <StoreTabItemHitem :item="item" />
        </VWindowItem>
        <VWindowItem value="tab-2">
          <StoreTabItemHoption :item="item" />
        </VWindowItem>
        <VWindowItem value="tab-3">
          <StoreTabItemHprice :item="item" />
        </VWindowItem>
        <VWindowItem value="tab-4">
          <StoreTabItemHstock :item="item" />
        </VWindowItem>
      </VWindow>
    </VCardText>
  </VCard>
</template>
