<template>
    <Dialog v-model="open" size="sm">
        <div class="p-6 space-y-4 w-full max-w-sm">
            <Heading :level="4">Confirm Purchase</Heading>
            <p class="text-sm text-text-secondary">Did you buy these items?</p>
            <ul class="list-disc list-inside text-sm">
                <li v-for="i in items" :key="i.id">{{ i.name }} × {{ i.quantity }}</li>
            </ul>
            <div class="flex gap-3 justify-end">
                <Button variant="outline" @click="open = false">Cancel</Button>
                <Button color="success" @click="confirm">Confirm</Button>
            </div>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Dialog, Button, Heading } from '@/components/ui'

interface ItemLite { id: number | string; name: string; quantity?: number | string }

const props = defineProps<{ items: ItemLite[] }>()
const emit = defineEmits<{ (e: 'confirm'): void }>()

const open = ref(true)

function confirm() {
    emit('confirm')
    open.value = false
}
</script>