<template>
  <div class="cart-icon">
    <a :href="cart.url" role="button">
      <img alt="cart" src="../assets/cart.svg">
      <span
        v-if="cart.count > 0"
        class="item-count"
      >
        {{ cart.count > 99 ? '99+' : cart.count }}
      </span>
    </a>
  </div>
</template>

<script setup lang="ts">
import { useVueBaseProps } from '@lightspeed/crane';
import { computed } from 'vue';
import { Design } from '../type.ts';

const baseProps = useVueBaseProps<unknown, Design>();
const siteContent = computed(() => baseProps.site?.value satisfies SiteContent);
const cart = computed(() => ({
  count: siteContent.value?.cart?.count ?? 0,
  url: siteContent.value?.cart?.url ?? '',
}));
</script>

<style scoped>
.cart-icon {
  position: relative;
  a:visited{
    text-decoration: none;
    color: black;
  }
}
.item-count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: 400;
  font-size: 13px;
}
</style>
