<template>
    <div class="productions-container">
        <production-card
v-for="production in productions" :key="production.title" :image-url="production.image_url"
            :name="production.title" :description="production.summary" />
    </div>

</template>



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

const baseUrl = 'http://192.168.86.5:1337';

class ProductionInfo {
    title: string;
    summary: string;
    image_url: string;

    constructor(title: string, summary: string, image_url: string) {
        this.title = title;
        this.summary = summary;
        this.image_url = baseUrl + image_url;
    }
}

interface StrapiProduction {
    title: string;
    summary: string;
    production_image?: {
        url: string;
    };
}

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

onMounted(async () => {
    const response = await find<StrapiProduction>('productions', {
        populate: '*',
    })
    productions.value = response.data.map((item: StrapiProduction) => {
        return new ProductionInfo(
            item.title,
            item.summary,
            item.production_image?.url || ''
        );
    });
});

</script>

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