<script setup lang="ts">
import Button from '@/components/ui/button/Button.vue';
import Empty from '@/components/ui/empty/Empty.vue';
import EmptyContent from '@/components/ui/empty/EmptyContent.vue';
import EmptyDescription from '@/components/ui/empty/EmptyDescription.vue';
import EmptyHeader from '@/components/ui/empty/EmptyHeader.vue';
import EmptyMedia from '@/components/ui/empty/EmptyMedia.vue';
import EmptyTitle from '@/components/ui/empty/EmptyTitle.vue';
import { FileMusicIcon } from 'lucide-vue-next';
import PlaylistCreateDialog from './PlaylistCreateDialog.vue';

</script>

<template>
    <Empty>
        <EmptyHeader>
            <EmptyMedia variant="icon">
                <FileMusicIcon />
            </EmptyMedia>
            <EmptyTitle>No playlists found</EmptyTitle>
            <EmptyDescription>No playlists found, create one right now!</EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
            <PlaylistCreateDialog>
                <template #trigger>
                    <Button>Create playlist</Button>
                </template>
            </PlaylistCreateDialog>
        </EmptyContent>
    </Empty>
</template>
