<template>
  <div class="resource-bottom">
    <div class="separator"></div>
    <div class="nav-link" :class="{ disabled: !prevResource }" @click="handleNavigate('prev')">
      <span class="nav-label">上一篇：</span>
      <span class="nav-title">{{ prevResource?.title || '没有了' }}</span>
    </div>
    <div class="nav-link" :class="{ disabled: !nextResource }" @click="handleNavigate('next')">
      <span class="nav-label">下一篇：</span>
      <span class="nav-title">{{ nextResource?.title || '没有了' }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Resource } from '@/types/resource';

interface Props {
  prevResource?: Resource | null;
  nextResource?: Resource | null;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  navigate: [direction: 'prev' | 'next', resource: Resource];
}>();

function handleNavigate(direction: 'prev' | 'next') {
  const resource = direction === 'prev' ? props.prevResource : props.nextResource;
  if (resource) {
    emit('navigate', direction, resource);
  }
}
</script>

<style lang="scss" scoped>
.resource-bottom {
  margin-top: 80px;
  padding-top: 20px;
}

.separator {
  width: 100%;
  height: 1px;
  background: #E9E9E9;
  margin-bottom: 20px;
}

.nav-link {
  font-family: 'PingFang SC';
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #334155;
  margin-bottom: 14px;
  cursor: pointer;
  transition: color 0.3s;
  
  &:hover:not(.disabled) {
    color: #C62828;
    
    .nav-title {
      text-decoration: underline;
    }
  }
  
  &.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  &:last-child {
    margin-bottom: 0;
  }
}

.nav-label {
  color: inherit;
}

.nav-title {
  color: inherit;
  transition: text-decoration 0.3s;
}
</style>

