<template>
  <NuxtLink
    :to="itemData.to"
    class="flex cursor-pointer items-center justify-between rounded-xl border bg-white p-10 px-5 transition-all"
  >
    <div>
      <div class="text-base font-bold text-black-3">
        {{ itemData.title }}
      </div>
      <div class="text-sm text-black-6">{{ itemData.subTitle }}</div>
      <div
        class="mt-5 h-2 w-18"
        :style="{ backgroundColor: itemData.color }"
      ></div>
    </div>
    <img :src="itemData.icon" class="h-23 w-23 object-contain" alt="" />
  </NuxtLink>
</template>

<script setup>
defineProps({
  itemData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
</script>

<style lang="scss" scoped></style>
