---
/**
 * PortfolioPreviewCard - Portfolio item preview card
 */
import type { PortfolioItem } from '@/lib/api/home'

interface Props {
  item: PortfolioItem
}

const { item } = Astro.props

const imageUrl = item.image?.url || '/placeholder-portfolio.jpg'
const imageAlt = item.image?.alt || item.title || 'Portfolio item'
const title = item.title || 'Untitled'
const slug = item.slug || ''
const description = item.description || ''
const websiteType = item.websiteType || ''

// Website type labels
const typeLabels: Record<string, string> = {
  corporate: '企業官網',
  ecommerce: '電商網站',
  landing: '活動頁面',
  brand: '品牌網站',
  other: '其他',
}

const typeLabel = typeLabels[websiteType] || ''
---

<li class="group">
  <a
    href={`/website-portfolio/${slug}`}
    class="block h-full"
  >
    <article class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 h-full flex flex-col group-hover:-translate-y-1">
      <!-- Image -->
      <div class="aspect-video overflow-hidden bg-gray-100">
        <img
          src={imageUrl}
          alt={imageAlt}
          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          loading="lazy"
          decoding="async"
        />
      </div>

      <!-- Content -->
      <div class="p-6 flex flex-col flex-grow">
        <!-- Type Badge -->
        {
          typeLabel && (
            <span class="inline-block px-3 py-1 text-xs font-medium bg-[var(--color-tropical-blue)] text-[var(--color-enchunblue)] rounded-full mb-3 w-fit">
              {typeLabel}
            </span>
          )
        }

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

        <!-- Description -->
        {
          description && (
            <p class="text-[var(--color-text-muted)] line-clamp-2 mb-4 flex-grow">
              {description}
            </p>
          )
        }

        <!-- CTA -->
        <div class="flex items-center text-[var(--color-enchunblue)] font-medium mt-auto">
          <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>
    </article>
  </a>
</li>
