<script setup lang="ts">
import { Printer } from '@lucide/vue';
import { Button } from '@/components/ui/button';
import Popover from '@/components/ui/popover/Popover.vue';
import PopoverContent from '@/components/ui/popover/PopoverContent.vue';
import PopoverTrigger from '@/components/ui/popover/PopoverTrigger.vue';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';

defineProps<{
    tooltip?: string;
    disabled?: boolean;
    popoverAlign?: 'start' | 'center' | 'end';
}>();

const open = defineModel<boolean>('open', { default: false });
</script>

<template>
    <Tooltip>
        <Popover v-model:open="open">
            <TooltipTrigger as-child>
                <PopoverTrigger as-child>
                    <Button variant="ghost" size="icon" class="size-8" :disabled="disabled">
                        <Printer class="size-4" />
                        <span class="sr-only">{{ tooltip || 'Cetak' }}</span>
                    </Button>
                </PopoverTrigger>
            </TooltipTrigger>

            <TooltipContent>{{ tooltip || 'Cetak' }}</TooltipContent>

            <PopoverContent :align="popoverAlign || 'end'" class="w-40 space-y-2 p-3">
                <slot name="popover-content" />
            </PopoverContent>
        </Popover>
    </Tooltip>
</template>
