<template>
  <component
    :is="linkable ? NuxtLink : 'div'"
    :to="linkable ? localePath(`/catalog/products/${product.uuid}`) : undefined"
    class="block"
    :class="{ 'cursor-pointer': selectable }"
    @click="selectable && $emit('select')"
  >
    <Card
      padding="sm"
      :interactive="linkable || selectable"
      :class="[
        isSelected && 'ring-2 ring-primary ring-offset-2'
      ]"
    >
      <Stack gap="2">
        <Stack gap="1">
          <Text size="base" weight="semibold">{{ product.name }}</Text>
          <Text tone="muted">{{ product.categoryName || t('catalogProduct.labels.category_unknown') }}</Text>
        </Stack>
        <Text v-if="product.description && !compact" tone="muted" size="sm">{{ product.description }}</Text>
      </Stack>
    </Card>
  </component>
</template>

<script setup lang="ts">
import { NuxtLink } from '#components'

interface Product {
  uuid?: string | null
  name?: string | null
  categoryName?: string | null
  description?: string | null
}

const props = defineProps<{
  product: Product
  selectable?: boolean
  isSelected?: boolean
  compact?: boolean
}>()

defineEmits<{
  (e: 'select'): void
}>()

const localePath = useLocalePath()
const { t } = useI18n()

const linkable = computed(() => !props.selectable && props.product.uuid)
</script>
