---
/**
 * ServiceFeatureCard - Individual service feature card component
 */
import type { ServiceFeature } from '@/lib/api/home'

interface Props {
  feature: ServiceFeature
}

const { feature } = Astro.props

const icon = feature.icon || '🎯'
const title = feature.title || '服務項目'
const description = feature.description || ''
const linkUrl = feature.link?.url
---

<li class="group">
  <a
    href={linkUrl || '#'}
    class={`block h-full ${!linkUrl ? 'pointer-events-none' : ''}`}
  >
    <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 h-full flex flex-col group-hover:-translate-y-1">
      <!-- Icon -->
      <div class="text-5xl mb-4" aria-hidden="true">
        {icon}
      </div>

      <!-- Title -->
      <h3 class="text-xl font-semibold text-[var(--color-enchunblue)] mb-4 group-hover:text-[var(--color-enchunblue-dark)] transition-colors">
        {title}
      </h3>

      <!-- Description -->
      <p class="text-[var(--color-text-secondary)] leading-relaxed flex-grow">
        {description}
      </p>

      <!-- Arrow indicator (only if link exists) -->
      {
        linkUrl && (
          <div class="mt-4 flex items-center text-[var(--color-enchunblue)] font-medium opacity-0 group-hover:opacity-100 transition-opacity">
            <span>了解更多</span>
            <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </div>
        )
      }
    </div>
  </a>
</li>
