<script lang="ts" setup>
import type { ThemeType } from '@bagelink/vue'
import { Btn, Modal } from '@bagelink/vue'

const props = defineProps<{
	title?: string
	message?: string
	confirmText?: string
	confirmBtnColor?: ThemeType
	cancelBtnColor?: ThemeType
	cancelText?: string
	resolve: (value: boolean) => void
}>()

const emit = defineEmits(['update:visible'])

function select(val: boolean) {
	props.resolve(val)
	emit('update:visible')
}

const title = props.title || 'Confirm'
const message = props.message || 'Are you sure you want to continue?'
const confirmText = props.confirmText || 'Confirm'
const cancelText = props.cancelText || 'Cancel'
const confirmBtnColor: ThemeType = props.confirmBtnColor || 'green'
const cancelBtnColor: ThemeType = props.cancelBtnColor || 'gray'
</script>

<template>
	<Modal :title="title" width="380px" :dismissable="false" class="txt-center">
		<p class="pb-05 pretty">
			{{ message }}
		</p>
		<template #footer>
			<Btn :color="cancelBtnColor" :value="cancelText" @click="select(false)" />
			<Btn :color="confirmBtnColor" :value="confirmText" @click="select(true)" />
		</template>
	</Modal>
</template>
