<script setup lang="ts">
const props = defineProps<{
  heading?: string
  summary?: string
  items: Array<{
    title: string
    description: string
    to: string
  }>
}>()

const headerClasses = ['blue', 'cyan', 'teal', 'indigo', 'green']
</script>

<template>
  <section class="cases-section" id="cases">
    <div class="container">
      <div class="row">
        <div class="product-advantages-header">
          <div>
            <h1 class="product-advantages-title">{{ heading || '客户案例' }}</h1>
            <p v-if="summary">{{ summary }}</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col col-xs-12">
          <NuxtLink v-for="(item, index) in props.items" :key="item.to" :to="item.to" class="case-card-link">
            <div class="case-card">
              <div :class="['case-card-header', headerClasses[index % headerClasses.length]]">
                <h3>{{ item.title }}</h3>
              </div>
              <div class="case-card-body">
                <p>{{ item.description }}</p>
              </div>
            </div>
          </NuxtLink>
        </div>
      </div>
    </div>
  </section>
</template>
