<script setup>
defineProps({
  links: {
    type: Array,
    default: () => [],
  },
  recentLinks: {
    type: Array,
    default: () => [],
  },
  totalCount: {
    type: Number,
    default: 0,
  },
  listLoading: {
    type: Boolean,
    default: false,
  },
  shortcutLabel: {
    type: String,
    default: 'Ctrl+K',
  },
  libraryColumns: {
    type: Number,
    default: null,
  },
  libraryColumnWidth: {
    type: Number,
    default: null,
  },
})

const emit = defineEmits([
  'open-search',
  'create-link',
  'import-data',
  'open-link',
  'edit-link',
  'delete-link',
  'open-settings',
  'view-link',
])

import AppShell from '@/components/layout/AppShell.vue'
import RecentLinks from '@/components/links/RecentLinks.vue'
import LinkList from '@/components/links/LinkList.vue'
</script>

<template>
  <AppShell
    :total-count="totalCount"
    :shortcut-label="shortcutLabel"
    @open-search="emit('open-search')"
    @create-link="emit('create-link')"
    @import-data="emit('import-data')"
    @open-settings="emit('open-settings')"
  >
    <template #recent>
      <RecentLinks :links="recentLinks" @open="(link) => emit('open-link', link)" @edit="(link) => emit('edit-link', link)" />
    </template>

    <template #library>
      <LinkList
        :links="links"
        :loading="listLoading"
        :columns="libraryColumns"
        :column-width="libraryColumnWidth ?? undefined"
        @open="(link) => emit('open-link', link)"
        @edit="(link) => emit('edit-link', link)"
        @remove="(link) => emit('delete-link', link)"
        @view="(link) => emit('view-link', link)"
      />
    </template>
  </AppShell>
</template>

