sfp_vue_franchisee_ginastica_cerebro/src/pages/packages/components/PackageCard.vue

<template>
  <q-card flat bordered class="package-card cursor-pointer" @click="$emit('click')">
    <q-card-section class="q-pa-md">
      <div class="text-subtitle1 text-weight-bold">{{ pkg.name }}</div>
      <div class="text-body2 text-grey-6 q-mb-sm">{{ pkg.quantity_classes }} Aulas</div>

      <div class="column" style="gap: 2px">
        <span class="text-body2">Contrato {{ formatToBRLCurrency(pkg.contract_value) }}</span>
        <span class="text-body2">
          Material {{ formatToBRLCurrency(pkg.contract_material_value) }} — Incluso
        </span>
        <span class="text-body2">Matrícula {{ formatToBRLCurrency(pkg.contract_register_value) }}</span>
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup>
import { formatToBRLCurrency } from "src/helpers/utils";

defineProps({
  pkg: {
    type: Object,
    required: true,
  },
});

defineEmits(["click"]);
</script>

<style scoped>
.package-card {
  border-radius: 12px;
  transition: box-shadow 0.2s;
}

.package-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>