<template>
  <div
    class="columns-layout"
    :class="[`columns-${cols}`, `divider-${divider}`, `collapse-${collapse}`]"
  >
    <template v-if="cols === 'events-sidebar'">
      <div class="col col-main">
        <slot />
      </div>
      <EventsMiniSidebar :events="upcomingEvents" />
    </template>
    <template v-else>
      <!-- cols="2": named slots only. Use <template #left> and <template #right>. -->
      <div class="col col-left">
        <slot name="left" />
      </div>
      <div class="col col-right">
        <slot name="right" />
      </div>
    </template>
  </div>
</template>

<script setup>
const props = defineProps({
  cols: { type: String, default: '2' }, // "2" | "events-sidebar"
  divider: { type: String, default: 'dashed' }, // "dashed" | "none"
  collapse: { type: String, default: '1024' }, // "1024" | "768"
  limit: { type: Number, default: 3 },
})

const upcomingEvents = ref([])
if (props.cols === 'events-sidebar') {
  const { data } = await useFetch('/api/events', {
    query: { upcoming: true, limit: props.limit },
    default: () => [],
  })
  upcomingEvents.value = data.value || []
}
</script>

<style scoped>
.columns-layout {
  display: grid;
  align-items: stretch;
}

/* cols="2" */
.columns-2 {
  grid-template-columns: 1fr 1fr;
}

/* cols="events-sidebar" */
.columns-events-sidebar {
  grid-template-columns: 1fr 200px;
  flex: 1;
}

/* Ensure grid children don't overflow */
.col {
  min-width: 0;
}

/* Dashed divider: right border on the first column child (except events-sidebar, which owns its own border-left) */
.divider-dashed .col:first-child,
.divider-dashed .col-main {
  border-right: 1px dashed var(--border);
}
.divider-dashed.columns-events-sidebar .col-main {
  border-right: none;
}

/* Responsive collapse at 1024px (default) */
.collapse-1024 {
  --col-collapse: 1024px;
}

/* Responsive collapse at 768px */
.collapse-768 {
  --col-collapse: 768px;
}

@media (max-width: 1024px) {
  .collapse-1024 {
    grid-template-columns: 1fr;
  }
  .collapse-1024 .col:first-child,
  .collapse-1024 .col-main {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .collapse-768 {
    grid-template-columns: 1fr;
  }
  .collapse-768 .col:first-child,
  .collapse-768 .col-main {
    border-right: none;
  }
}
</style>
