<template>
  <div class="receipt-section" :class="[variant, { collapsed: isCollapsed }]">
    <div class="section-header" @click="toggleable && toggle()">
      <span class="section-title">{{ title }}</span>
      <div class="section-right">
        <slot name="header-right"></slot>
        <i
          v-if="toggleable"
          :class="isCollapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'"
          class="toggle-icon"
        ></i>
      </div>
    </div>
    <div class="section-content" v-show="!isCollapsed">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  title: { type: String, required: true },
  variant: {
    type: String,
    default: 'default',
    validator: (v) => ['default', 'highlight', 'muted'].includes(v)
  },
  toggleable: { type: Boolean, default: false },
  collapsed: { type: Boolean, default: false },
})

const emit = defineEmits(['update:collapsed'])

const isCollapsed = ref(props.collapsed)

watch(() => props.collapsed, (val) => {
  isCollapsed.value = val
})

const toggle = () => {
  isCollapsed.value = !isCollapsed.value
  emit('update:collapsed', isCollapsed.value)
}
</script>

<style scoped>
.receipt-section {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.receipt-section:last-child {
  margin-bottom: 0;
}

/* Variants */
.receipt-section.highlight {
  background: var(--green-50);
  border-color: var(--green-200);
}

.receipt-section.muted {
  background: var(--surface-ground);
  border-color: var(--surface-border);
}

/* Header */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px dashed var(--surface-border);
  background: rgba(0, 0, 0, 0.02);
}

.receipt-section.highlight .section-header {
  background: rgba(34, 197, 94, 0.08);
  border-bottom-color: var(--green-300);
}

.receipt-section.collapsed .section-header {
  border-bottom: none;
}

.receipt-section[class*="toggleable"] .section-header {
  cursor: pointer;
}

.section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-color-secondary);
}

.receipt-section.highlight .section-title {
  color: var(--green-800);
}

.section-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toggle-icon {
  font-size: 0.7rem;
  color: var(--text-color-secondary);
  transition: transform 0.2s;
}

/* Content */
.section-content {
  padding: 0.75rem;
}

/* Responsive */
@media (max-width: 640px) {
  .section-content {
    padding: 0.5rem;
  }
}

/* Dark mode */
[data-theme="dark"] .receipt-section {
  background: rgba(30, 41, 59, 0.6);
}

[data-theme="dark"] .receipt-section.highlight {
  background: rgba(34, 197, 94, 0.08);
  border-color: var(--green-800);
}

[data-theme="dark"] .section-header {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .receipt-section.highlight .section-header {
  background: rgba(34, 197, 94, 0.05);
}
</style>
