<template>
  <div
    class="nucleo-data-card-container rounded-lg shadow-md p-6 border-t-4"
    :style="{ backgroundColor: backgroundColor, borderTopColor: accentColor }"
  >
    <!-- Header -->
    <div class="flex items-center justify-between mb-4">
      <slot name="header">
        <div class="flex items-center">
          <img v-if="avatarUrl" :src="avatarUrl" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
          <h2 class="text-xl font-semibold text-gray-800">{{ title }}</h2>
        </div>
        <span v-if="status" :class="`px-2 py-1 text-xs font-semibold leading-tight text-${accentColor}-700 bg-${accentColor}-100 rounded-full`">{{ status }}</span>
      </slot>
    </div>

    <!-- Body -->
    <div class="mb-4">
      <slot name="body">
        <div v-for="(field, index) in fields" :key="index" class="mb-2">
          <p class="text-sm text-gray-600 font-medium">{{ field.label }}:</p>
          <p class="text-sm text-gray-800">{{ field.value }}</p>
        </div>
        <div v-if="observation" class="mt-4">
          <p class="text-sm text-gray-600 font-medium">Observation:</p>
          <p class="text-sm text-gray-800">{{ observation }}</p>
        </div>
      </slot>
    </div>

    <!-- Footer -->
    <div class="flex justify-end items-center">
      <slot name="footer">
        <slot name="actions"></slot>
        <button v-if="showEditButton" @click="$emit('edit')" class="text-sm text-blue-500 hover:text-blue-700 font-medium mr-4">Edit</button>
        <button v-if="showDeleteButton" @click="$emit('delete')" class="text-sm text-red-500 hover:text-red-700 font-medium">Delete</button>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NucleoDataCard',
  props: {
    title: {
      type: String,
      required: true,
    },
    status: {
      type: String,
      default: '',
    },
    fields: {
      type: Array,
      default: () => [], // Example: [{ label: 'ID', value: '123' }]
    },
    accentColor: {
      type: String,
      default: '#808080', // Default to gray hex
    },
    backgroundColor: {
      type: String,
      default: '#FFFFFF', // Default to white hex
    },
    avatarUrl: {
      type: String,
      default: '',
    },
    observation: {
      type: String,
      default: '',
    },
    showEditButton: {
      type: Boolean,
      default: true,
    },
    showDeleteButton: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['edit', 'delete'],
};
</script>

<style scoped>
/* Scoped styles can be added here if needed, Tailwind CSS is preferred for general styling */

@keyframes grow {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

.nucleo-data-card-container:hover {
  animation-name: grow;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.nucleo-data-card-container {
  transition: transform 0.3s ease-out;
}
</style>
