<template>
  <UModal
    v-model:open="isOpen"
    :ui="{
      overlay: 'modal-overlay',
      content: 'cata-bg cata-outline-box max-w-3xl',
      header: 'cata-bg',
      body: 'cata-bg p-0',
      footer: 'cata-bg',
      title: 'cata-text'
    }"
  >
    <!-- Trigger (slot por defecto) -->
    <slot />

    <!-- Título personalizado -->
    <template #title>
      <span class="cata-text">Resumen Detallado</span>
    </template>

    <!-- Contenido del modal -->
    <template #body>
      <CataResumenMuestraExpandido :muestra="muestra" />
    </template>

    <!-- Footer con botón -->
    <template #footer>
      <div class="flex justify-end w-full">
        <button
          class="cata-button px-4 py-2"
          @click="cerrar"
        >
          Cerrar
        </button>
      </div>
    </template>
  </UModal>
</template>

<script setup lang="ts">
import type { Muestra } from '~/types/catacion'

interface Props {
  modelValue: boolean
  muestra: Muestra
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

// Estado del modal
const isOpen = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
})

const cerrar = () => {
  isOpen.value = false
}
</script>

<style>
.modal-overlay {
  background-color: var(--cata-bg) !important;
  opacity: 0.95 !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
</style>
