<template>
  <div :class="payment.category.type.code == 'INCOME' ? 'from-green-100 to-green-50' : ' from-red-100 to-red-50' "
       class="recurrent-card bg-gradient-to-r  shadow-xl rounded-lg p-6 w-full hover:shadow-2xl transition duration-300 transform hover:scale-105">
    <div class="flex flex-col gap-5 justify-between items-start">
      <!-- Дата и Сумма -->
      <div class="flex flex-row justify-between w-full items-center">
        <div class="text-gray-500">
          <strong class="text-3xl text-green-600">{{ payment.atDay }} </strong> числа
        </div>

        <div class="flex items-center gap-4">
          <Button icon="pi pi-pencil" class="p-button-rounded p-button-text p-button-sm" @click="editPayment"/>
          <Button icon="pi pi-trash" class="p-button-rounded p-button-text p-button-danger p-button-sm"
                  @click="deletePayment"/>
        </div>



      </div>

      <!-- Категория и Описание -->
      <div class="flex items-center gap-4 w-full justify-between">
        <!-- Иконка категории -->

        <!-- Информация о платеже -->
        <div class="flex flex-row">
          <div class="flex items-center gap-4">
            <span class="text-4xl">{{ payment.category.icon }}</span>
          </div>
          <div class="flex flex-col">
          <h2 class="text-xl font-semibold text-gray-800">{{ payment.name }}</h2>
          <p class="text-sm text-gray-500 line-clamp-1">{{ payment.description }}</p>
          </div>
        </div>
        <div
            :class="payment.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-green-700'"
            class="text-2xl font-bold line-clamp-1 ">{{ formatAmount(payment.amount) }} ₽
        </div>
      </div>

      <!-- Действия -->

    </div>
  </div>
</template>

<script setup lang="ts">
import {defineProps, defineEmits, PropType} from 'vue';
import Button from 'primevue/button';
import {RecurrentPayment} from '@/models/Recurrent';

const props = defineProps({
  payment: {
    type: Object as PropType<RecurrentPayment>,
    required: true,
  },
});

const formatAmount = (amount: number) => {
  return new Intl.NumberFormat('ru-RU').format(amount);
};

const emit = defineEmits(['edit-payment', 'delete-payment']);

const editPayment = () => {
  emit('edit-payment', props.payment);
};

const deletePayment = () => {
  emit('delete-payment', props.payment);
};
</script>

<style scoped>
.recurrent-card {
  transition: all 0.3s ease;
  //background: linear-gradient(135deg, #f0fff4, #c6f6d5);
}

.recurrent-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}


</style>
