<script setup lang="ts">
import { useQuery } from '@vue/apollo-composable';
import { ClientProductsDocument } from '~/composables/graphql/generated';

const { result, loading, error } = useQuery(ClientProductsDocument);
</script>

<template>
  <section class="space-y-4">
    <h1 class="text-2xl font-bold">Витрина товаров</h1>
    <div v-if="loading" class="alert">Загрузка...</div>
    <div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
    <div v-else class="grid gap-4 lg:grid-cols-2">
      <article v-for="product in result?.clientProducts ?? []" :key="product.id" class="card bg-base-100 border border-base-300">
        <div class="card-body gap-2">
          <h2 class="card-title">{{ product.name }}</h2>
          <p class="text-sm opacity-80">{{ product.description }}</p>
          <p class="text-xs">SKU: {{ product.sku }}</p>
          <ul class="text-sm space-y-1">
            <li v-for="stock in product.availableInWarehouses" :key="stock.warehouse.id">{{ stock.warehouse.name }}: {{ stock.availableQty }}</li>
          </ul>
        </div>
      </article>
    </div>
  </section>
</template>
