<template>
    <el-card class="production-card">
        <!-- Image -->
        <el-image :src="imageUrl" fit="cover" />
        <template #footer>
            <!-- Name -->
            <div class="text-center mx-auto text-md">
                <span class="production-name">{{ name }}</span>
            </div>
            <!-- Description -->
            <div class="mx-auto mt-5 text-center text-sm opacity-25">{{ description }}</div>
        </template>
    </el-card>
</template>

<script setup lang="ts">
defineProps<{
    name: string;
    description: string;
    imageUrl: string;
}>();
</script>

<style scoped>
.production-card {
    width: 30%;
    margin: 20px auto;
}
</style>