<script setup lang="ts">
import { Package } from '@lucide/vue';
import type { MediaItem } from '@/types/media';

withDefaults(defineProps<{
    title: string;
    coverImage?: MediaItem;
    showCover?: boolean;
}>(), {
    showCover: true,
});
</script>

<template>
    <article class="mb-4 break-inside-avoid overflow-hidden rounded-lg border bg-card shadow-sm">
        <div v-if="showCover" class="relative aspect-4/3 overflow-hidden bg-muted/30">
            <img
                v-if="coverImage"
                :src="coverImage.thumb_url"
                :alt="title"
                class="size-full object-cover"
            >
            <div
                v-else
                class="flex size-full items-center justify-center text-muted-foreground"
            >
                <Package class="size-10 opacity-40" />
            </div>
        </div>

        <div class="border-b bg-muted/20 px-3 py-2.5">
            <h3 class="font-medium leading-tight">
                {{ title }}
            </h3>
            <slot name="header-extra" />
        </div>

        <div class="divide-y">
            <slot />
        </div>
    </article>
</template>
