<template>
    <el-card class="production-card" @click="handleClick">
        <!-- Image -->
        <el-image class="production-image" :src="imageUrl" fit="contain" />
        <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">

interface Props {
    name: string
    description: string
    imageUrl: string
    id?: string | number
    slug?: string
}

const props = defineProps<Props>()
const localePath = useLocalePath()

const handleClick = () => {
    // 优先使用 slug，如果没有则使用 id
    const routeParam = props.slug || props.id
    if (routeParam) {
        navigateTo(localePath(`/productions/${routeParam}`))
    }
}
</script>

<style scoped>
.production-card {
    width: 20%;
    /* margin: 20px auto; */
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.production-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.production-name {
    font-weight: 600;
    color: var(--el-text-color-primary);
}

.production-card .el-image {
    height: 200px;
    border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .production-card {
        width: 45%;
    }
}

@media (max-width: 768px) {
    .production-card {
        width: 90%;
    }
}
</style>