<template>
    <Frame margin="none" class="px-3 py-4 flex items-center gap-2">
        <div>
            <AudioWaveform :size="32" />
        </div>
        <div class="w-full">
            <div class="flex flex-row items-center gap-1">
                <p class="font-medium">
                    {{ title }}
                </p>
                <UiButton variant="ghost" v-if="size">
                    <Pen />
                </UiButton>
            </div>
            <div class="flex flex-row" v-if="size && format">
                <p class="text-sm text-muted-foreground">
                    {{ size }}
                </p>
                <Dot />
                <p class="text-sm text-muted-foreground">
                    {{ format }}
                </p>
            </div>
            <div class="flex flex-row items-center gap-2" v-if="progress">
                <p class="text-sm text-muted-foreground">
                    {{ progress }}%
                </p>
                <UiProgress :modelValue="progress" />
            </div>
            <div class="flex flex-row" v-if="error">
                <p class="text-sm text-destructive-foreground">
                    {{ error }}
                </p>
            </div>
        </div>
        <div>
            <UiButton variant="ghost">
                <EllipsisVertical :size="32" />
            </UiButton>
        </div>
    </Frame>
</template>

<script setup lang="ts">
import Frame from '@/components/ui/frame/Frame.vue'
import { AudioWaveform, Dot, EllipsisVertical, Pen } from 'lucide-vue-next'

interface Props {
    title: string
    size?: string
    format?: string
    progress?: number
    error?: string
}

withDefaults(defineProps<Props>(), {
})
</script>
