<template>
  <el-card class="support-card">
    <el-row>
      <el-col :span="6">
        <el-icon class="card-icon" size="80">
          <component :is="iconComponent" />
        </el-icon>
      </el-col>
      <el-col :span="18">
        <div class="card-title">
          <span>{{ title }}</span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div class="card-content">
        <p>{{ description }}</p>
      </div>
    </el-row>
    <el-row>
      <NuxtLink class="card-link" :to="to">
        <el-button class="card-button" round>
          <span>了解更多 > </span>
        </el-button>
      </NuxtLink>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
  defineProps({
    title: {
      type: String,
      default: '',
    },
    description: {
      type: String,
      default: '',
    },
    to: {
      type: String,
      default: '',
    },
    iconComponent: {
      type: Object,
      default: null,
    },
  });
</script>

<style scoped>
  .support-card {
    width: 100%;
    padding: 20px;
    box-shadow: none;
    border-radius: none;
  }

  .card-icon {
    color: var(--el-color-primary);
  }

  .card-title {
    display: flex;
    height: 100%;
    align-items: center;
    margin-left: 2rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--el-color-primary);
  }

  .card-link {
    margin-left: auto;
  }

  .card-button {
    cursor: pointer;
    text-align: center;
    font-size: 1rem;
    color: var(--el-color-primary);
    transition: all 0.3s ease;
  }

  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }
</style>
