<script setup lang="ts">
defineProps<{
  title: string
  price: string
  image: string
}>()
</script>

<template>
  <div class="overflow-hidden rounded-2xl border bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
    <img
      :src="image"
      :alt="title"
      class="h-64 w-full object-cover"
    >

    <div class="space-y-4 p-5">
      <div>
        <h3 class="text-lg font-semibold text-gray-900">
          {{ title }}
        </h3>

        <p class="mt-1 text-sm text-gray-500">
          Premium product for your daily needs.
        </p>
      </div>

      <div class="flex items-center justify-between">
        <span class="text-xl font-bold text-primary">
          {{ price }}
        </span>

        <UButton>
          Buy Now
        </UButton>
      </div>
    </div>
  </div>
</template>
