<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>
      <q-btn
        v-if="canDelete"
        flat
        round
        dense
        icon="mdi-delete-outline"
        color="negative"
        class="absolute-top-right q-ma-sm"
        @click.stop="$emit('delete')"
      />
      <div class="text-body2 text-grey-6 q-mb-sm">{{ pkg.quantity_classes }} Aulas</div>
      <div class="text-body2 text-grey-6 q-mb-sm">
        Duração padrão: {{ (pkg.class_duration_minutes ?? 120) / 60 }}h
      </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,
  },
  canDelete: {
    type: Boolean,
    default: false,
  },
});

defineEmits(["click", "delete"]);
</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>
