<template>
    <Frame margin="none" class="px-3 py-4 flex items-center gap-2">
        <div>
            <ListMusicIcon :size="40" v-if="hasLoaded" />
            <CassetteTape :size="40" v-if="hasProgress" />
            <FileQuestionMark :size="40" v-if="hasError" />
        </div>
        <div class="w-full">
            <div class="flex flex-row items-center gap-1">
                <p class="font-medium">
                    {{ title }}
                </p>
            </div>
            <div class="flex flex-row" v-if="hasLoaded">
                <p class="text-sm text-muted-foreground">
                    {{ trackCount }} track(s)
                </p>
                <Dot />
                <p class="text-sm text-muted-foreground">
                    {{ type }}
                </p>
            </div>
            <div class="flex flex-row items-center gap-2" v-if="hasProgress">
                <p class="text-sm text-muted-foreground">
                    {{ progress }}%
                </p>
                <UiProgress :modelValue="progress" />
            </div>
            <div class="flex flex-row" v-if="hasError">
                <p class="text-sm text-destructive-foreground">
                    {{ error }}
                </p>
            </div>
        </div>
        <div>
            <DropdownMenu>
                <DropdownMenuTrigger as-child>
                    <UiButton variant="ghost">
                        <EllipsisVertical :size="40" />
                    </UiButton>
                </DropdownMenuTrigger>
                <DropdownMenuContent class="w-56" align="start">
                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
                    <DropdownMenuGroup>
                        <DropdownMenuItem>
                            Profile
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                            Billing
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                            Settings
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                            Keyboard shortcuts
                        </DropdownMenuItem>
                    </DropdownMenuGroup>
                </DropdownMenuContent>
            </DropdownMenu>
        </div>
    </Frame>
</template>

<script lang="ts">

</script>

<script setup lang="ts">
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuShortcut,
    DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import Frame from '@/components/ui/frame/Frame.vue';
import { CassetteTape, Dot, EllipsisVertical, FileQuestionMark, ListMusicIcon } from 'lucide-vue-next';

interface Props {
    title: string
    trackCount?: number
    type?: string
    progress?: number
    error?: string
}

const props = withDefaults(defineProps<Props>(), {
});

const hasLoaded = props.trackCount && props.type;
const hasProgress = props.progress;
const hasError = props.error;

</script>
