<template>
    <Frame margin="none" class="px-2 py-3 flex h-fit gap-2 hover:bg-muted" :class="selected && 'bg-muted'">
        <div class="text-[2rem] h-full">
            <Draggable />
        </div>
        <Separator orientation="vertical" />
        <div class="w-fit flex-1 flex flex-col justify-between">
            <div class="w-full">
                <div class="flex items-start justify-between w-full">
                    <h4 class="scroll-m-20 text-xl font-semibold tracking-tight truncate max-w-[32ch]">
                        {{ title }}
                    </h4>
                    <p class="max-w-[16ch]" v-if="date">
                        {{ date }}
                    </p>
                </div>
                <div>
                    <p class="text-sm text-muted-foreground">
                        {{ author }}
                    </p>
                </div>
            </div>
            <div class="flex gap-1" v-if="badges && badges.length > 0">
                <Badge v-for="(badge, index) in badges" :key="index">
                    {{ badge }}
                </Badge>
            </div>
        </div>
        <Separator orientation="vertical" />
        <div class="max-w-20 max-h-20 w-20 h-20" v-if="imageUrl">
            <NuxtImg class="object-cover w-full h-full rounded-md" :src="imageUrl" :alt="title" />
        </div>
    </Frame>
</template>

<script setup lang="ts">
import { Separator } from '@/components/ui/separator'
import { Badge } from '@/components/ui/badge'
import Draggable from '@/components/icon/Draggable.vue'
import Frame from '@/components/ui/frame/Frame.vue'

interface Props {
    title: string
    author: string
    selected?: boolean
    badges?: string[]
    imageUrl?: string
    date?: string
}

withDefaults(defineProps<Props>(), {
    authorLabel: 'Author',
    badges: () => []
})
</script>
