<script setup lang="ts">
import { theme } from "ant-design-vue";
import { IStory } from "@models/stories";
import { deleteStory } from "@client/storyActions";
const props = defineProps<{ story: IStory }>();
console.log("SINFO", props.story._id);
</script>

<template>
	<a-popconfirm title="Are you sure you want to delete this story?" @confirm="() => deleteStory(story._id!)">
		<a-tooltip title="Delete">
			<a-button type="ghost">
				<icon istyle="regular" name="trash" :icolor="theme.useToken().token.value.colorError" />
			</a-button>
		</a-tooltip>
	</a-popconfirm>
	<a-tooltip title="Edit">
		<nuxt-link :to="`/story/${story._id}/edit`">
			<a-button type="ghost">
				<icon istyle="regular" name="pen-to-square" />
			</a-button>
		</nuxt-link>
	</a-tooltip>
	<a-tooltip title="View">
		<nuxt-link :to="`/story/${story._id}/${story.chapters.length}`">
			<a-button type="ghost">
				<icon istyle="regular" name="eye" />
			</a-button>
		</nuxt-link>
	</a-tooltip>
</template>

<style scoped></style>