<script setup>
import { apiClient } from '@/services/apiClient.js'
import { onMounted, ref } from 'vue'

const props = defineProps({
  merch_uuid: {
    type: String,
    required: true
  }
})

const merchDetails = ref(null)
const loading = ref(true)
const error = ref(null)

const fetchMerch = async () => {
  try {
    const response = await apiClient.get(`/merch/${props.merch_uuid}`)
    if (!response.ok) throw new Error('Network response was not ok')
    merchDetails.value = response.data
  } catch (err) {
    error.value = err.message
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchMerch()
})
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">Error: {{ error }}</div>
  <n-card v-else-if="merchDetails" :title="merchDetails.name">
    <n-divider title-placement="left">Main</n-divider>
    <p><strong>Uuid:</strong> {{ merchDetails.merch_uuid }}</p>
    <p><strong>Name:</strong> {{ merchDetails.name }}</p>

    <n-divider title-placement="left">Surugaya</n-divider>
    <p><strong>Link:</strong> {{ merchDetails.origin_surugaya.link }}</p>
    <p><strong>Cookie values:</strong> {{ merchDetails.origin_surugaya.cookie_values }}</p>

    <n-divider title-placement="left">Mandarake</n-divider>
    <p><strong>Link</strong> {{ merchDetails.origin_mandarake.link }}</p>
  </n-card>
  <div v-else>Not found</div>
</template>

<style scoped>
/* Добавь стили по желанию */
</style>

