<template>
  <div class="flex-1 flex flex-col lg:flex-row min-h-0">
    <!-- List panel -->
    <div
      class="flex-1 overflow-auto lg:w-3/5 lg:max-w-none"
      :class="{ 'hidden lg:block': mobileView === 'map' }"
    >
      <slot name="list" />
    </div>

    <!-- Map panel -->
    <div
      class="lg:w-2/5 lg:sticky lg:top-0 lg:h-[calc(100vh-13rem)]"
      :class="{ 'hidden lg:block': mobileView === 'list', 'flex-1': mobileView === 'map' }"
    >
      <slot name="map" />
    </div>

    <!-- Mobile toggle -->
    <div class="lg:hidden fixed bottom-4 left-1/2 -translate-x-1/2 z-30">
      <div class="btn-group shadow-lg">
        <button
          class="btn btn-sm"
          :class="{ 'btn-active': mobileView === 'list' }"
          @click="mobileView = 'list'"
        >
          <Icon name="lucide:list" size="16" />
          {{ $t('common.list') }}
        </button>
        <button
          class="btn btn-sm"
          :class="{ 'btn-active': mobileView === 'map' }"
          @click="mobileView = 'map'"
        >
          <Icon name="lucide:map" size="16" />
          {{ $t('common.map') }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  defaultView?: 'list' | 'map'
}>()

const mobileView = ref<'list' | 'map'>(props.defaultView || 'list')
</script>
