<template>
  <el-card
    class="solution-card"
    body-class="card-body"
    header-class="card-header"
    @click="handleClick"
  >
    <template #header>
      <!-- Cover Image -->
      <el-image class="solution-cover" :src="coverUrl" fit="cover" />
    </template>
    <!-- Title -->
    <template #default>
      <div class="text-center mx-auto text-md">
        <span class="solution-title">{{ title }}</span>
      </div>
      <!-- Summary -->
      <div class="mx-auto mt-5 text-left text-sm opacity-25">{{ summary }}</div>
    </template>
  </el-card>
</template>

<script setup lang="ts">
  interface Props {
    title: string;
    summary: string;
    coverUrl: string;
    documentId?: string;
  }

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

  const handleClick = () => {
    const routeParam = props.documentId;
    if (routeParam) {
      navigateTo(localePath(`/solutions/${routeParam}`));
    }
  };
</script>

<style scoped>
  .solution-card {
    width: 30%;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
  }

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

  .solution-title {
    font-weight: 600;
  }

  :deep(.card-header) {
    padding: 0;
    border-bottom: none !important;
  }

  :deep(.card-body) {
    margin: 10px auto;
    padding: 1px auto;
  }

  .solution-card .el-image {
    height: 250px;
  }

  @media (max-width: 1200px) {
    .solution-card {
      width: 45%;
    }
  }

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