<template>
  <div>
    <nuxt-link :to="{
      name: `id-slug___${$i18n.locale}`,
      params: {
        id: menuStore.getProductMenu()?.id,
        slug: menuStore.getProductMenu()?.front_menu_lang.at(0)?.link_rewrite,
      },
      query: {
        prod_id: product.id,
        name: product.link_rewrite,
      },
    }">
      <div
        class="w-[150px] sm:w-[260px] md:w-[330px] px-2 py-3 sm:py-5 sm:px-[15px] bg-block rounded-2xl flex flex-col items-center gap-[15px] sm:gap-[50px] h-full">
        <img :src="`/api/public/file/${product.cover_picture_uuid}.webp`" alt="Product Image"
             class="h-[95px] sm:h-[180px] md:h-[205px] rounded-[5px]" @error="handleImageError" />

        <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px]">
          <div class="flex flex-col gap-[7px] sm:gap-[15px] w-full">
            <h3
              class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
              {{ product.name }}
            </h3>
            <p class="text-[9px] sm:text-[12px] text-sm text-bg-dark">
              {{ product.tax_name }}
            </p>
          </div>
          <div class="flex items-center justify-between">
            <p
              class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
              {{ formater.price(product.price) }}
            </p>
            <button
              class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] text-bg-light sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1"
              @click.stop.prevent="productStore.incrementCartItem(product.id)">
              <i class="uil uil-shopping-cart text-lg sm:text-2xl md:text-[31px]" />
            </button>
          </div>
        </div>
      </div>
    </nuxt-link>
  </div>
</template>

<script setup lang="ts">
interface Product {
  id: number
  name: string
  link_rewrite: string
  tax_name: string
  formatted_price: string
  cover_picture_uuid: string
}

defineProps<{ product: Product }>()

const productStore = useProductStore()
const menuStore = useMenuStore()
const formater = useFormater(useNuxtApp())
function handleImageError(event: Event) {
  const img = event.target as HTMLImageElement
  img.src = '/photo.svg'
}
</script>
