<template>
    <div class="productions-container">
        <production-card
            v-for="production in productions" 
            :id="production.id"
            :key="production.id" 
            :slug="production.documentId"
            :image-url="useStrapiMedia(production?.production_image?.url || '')"
            :name="production.title" 
            :description="production.summary || ''" 
        />
    </div>
</template>



<script setup lang="ts">
const { find } = useStrapi()
const { getStrapiLocale } = useLocalizations()

const strapiLocale = getStrapiLocale()

const productions = ref<Production[]>();

onMounted(async () => {
    try {
        const response = await find<Production>('productions', {
            populate: '*',
            locale: strapiLocale, // 使用简体中文
        })
        productions.value = response.data.map((item: Production) => ({
            title: item.title,
            summary: item.summary,
            production_type: item.production_type,
            production_image: item.production_image,
            production_details: item.production_details,
            production_specs: item.production_specs,
            documentId: item.documentId
        }))
    } catch (error) {
        console.error('Failed to fetch productions:', error)
    }
});

</script>

<style scoped>
.productions-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 20px;
}
</style>