<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 gap-4">
                <p class="font-medium">
                    {{ title }}
                </p>
                <Pen />
            </div>
            <div class="flex flex-row">
                <p class="text-sm text-muted-foreground">
                    {{ size }}
                </p>
                <Dot />
                <p class="text-sm text-muted-foreground">
                    {{ format }}
                </p>
            </div>
        </div>
        <div>
            <EllipsisVertical :size="32" />
        </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>
