<script setup lang="ts">
import { NButton } from 'naive-ui'
import { useRouter } from 'vue-router'

interface Props {
  title: string
  date: string
}

defineProps<Props>()

const emit = defineEmits<{
  (e: 'publish'): void
}>()

const router = useRouter()

function goBack() {
  router.back()
}
</script>

<template>
  <div class="mb-6 flex items-center justify-between">
    <div class="flex items-start gap-4">
      <NButton text class="mt-1 text-24px" @click="goBack">
        <template #icon>
          <icon-ic-round-arrow-back class="text-icon" />
        </template>
      </NButton>
      <div>
        <h1 class="text-20px font-bold">
          {{ title }}
        </h1>
        <div class="mt-1 flex items-center gap-2 text-gray-500">
          <icon-ic-round-access-time class="text-icon" />
          <span>活动日期：{{ date }}</span>
        </div>
      </div>
    </div>
    <NButton type="primary" class="px-6" @click="emit('publish')">
      发布本场榜单
    </NButton>
  </div>
</template>
