<template>
  <div class="flex" v-if="userRole > 4">
    <ClientOnly>
      <span class="ml-auto inline-flex rounded-md shadow-sm dark:shadow-md m-4">
        <NuxtLink
          type="button"
          :to="listRouteName"
          class="relative inline-flex items-center rounded-l-md px-3 py-2 text-sm font-semibold bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 dark:bg-gray-700 dark:text-gray-200 dark:ring-gray-600 dark:hover:bg-gray-600"
        >
          목록
        </NuxtLink>

        <button
          type="button"
          @click.prevent="emit('edit')"
          class="relative -ml-px inline-flex items-center px-3 py-2 text-sm font-semibold bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 dark:bg-gray-700 dark:text-gray-200 dark:ring-gray-600 dark:hover:bg-gray-600"
        >
          수정
        </button>

        <button
          type="button"
          @click.prevent="emit('delete')"
          class="relative -ml-px inline-flex items-center px-3 py-2 text-sm font-semibold bg-red-600 text-white ring-1 ring-inset ring-red-700 hover:bg-red-700 focus:z-10 dark:bg-red-700 dark:ring-red-800 dark:hover:bg-red-800 dark:text-red-100"
        >
          삭제
        </button>

        <NuxtLink
          type="button"
          :to="uploadRouteName"
          class="relative -ml-px inline-flex items-center rounded-r-md px-3 py-2 text-sm font-semibold bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 dark:bg-gray-700 dark:text-gray-200 dark:ring-gray-600 dark:hover:bg-gray-600"
        >
          글쓰기
        </NuxtLink>
      </span>
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import useUserStore from '@/stores/user';

const userStore = useUserStore();
const userRole = computed(() => userStore.userRole);

const props = defineProps<{
  listRouteName: string;
  uploadRouteName: string;
}>();

const emit = defineEmits<{
  (e: 'edit'): void;
  (e: 'delete'): void;
}>();
</script>
