<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: '',
    required: false,
  },
  icon: {
    type: String,
    required: true,
  },
  changeValue: {
    type: String,
    required: true,
  },
  value: {
    type: String,
    required: true,
  },
})
</script>

<template>
  <div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
    <dt>
      <div class="absolute rounded-md bg-green-500 p-3">
        <Icon class="text-white" size="24" :name="icon" />
      </div>
      <p class="ml-16 truncate text-sm font-medium text-gray-500">
        {{ title }}
      </p>
    </dt>
    <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
      <p class="text-2xl font-semibold text-gray-900">
        {{ value }} KG
      </p>
      <p class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
        <svg class="h-5 w-5 flex-shrink-0 self-center text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
        </svg>
        <span class="sr-only"> Increased by </span>
        {{ changeValue }} KG
      </p>
      <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
        <div class="text-sm">
          <NuxtLink to="#" class="font-medium text-green-600 hover:text-green-500">
            View Data
          </NuxtLink>
        </div>
      </div>
    </dd>
  </div>
</template>

<style scoped>

</style>
