---
/**
 * PortfolioCard - Portfolio item card component
 * Pixel-perfect implementation based on Webflow design
 */

interface PortfolioItem {
  slug: string;
  title: string;
  description: string;
  image?: string;
  tags?: string[];
  externalUrl?: string;
}

interface Props {
  item: PortfolioItem;
}

const { item } = Astro.props;

const imageUrl = item.image || "/placeholder-portfolio.jpg";
const title = item.title || "Untitled";
const description = item.description || "";
const tags = item.tags || [];
const hasExternalLink = !!item.externalUrl;
const linkHref = hasExternalLink
  ? item.externalUrl
  : `/website-portfolio/${item.slug}`;
const linkTarget = hasExternalLink ? "_blank" : "_self";
const linkRel = hasExternalLink ? "noopener noreferrer" : "";
---

<li class="list-none">
  <a
    href={linkHref}
    target={linkTarget}
    rel={linkRel}
    class="block bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 ease-in-out no-underline text-inherit hover:-translate-y-1 group"
  >
    <!-- Content -->
    <div class="p-2 md:p-3">
      <!-- Title -->
      <h3
        class="font-['Noto_Sans_TC'] text-xl md:text-2xl font-semibold text-[var(--color-tarawera)] mb-2"
      >
        {title}
      </h3>

      <!-- Description -->
      {
        description && (
          <p class="font-['Noto_Sans_TC'] font-thin text-sm md:text-sm text-(--color-gray-600) leading- tracking-wide mb-4">
            {description}
          </p>
        )
      }
      <!-- Image Wrapper -->
      <div class="relative w-full rounded-lg aspect-video mb-4 overflow-hidden">
        <img
          src={imageUrl}
          alt={title}
          class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
          loading="lazy"
          decoding="async"
          width="800"
          height="450"
        />
      </div>

      <!-- Tags -->
      {
        tags.length > 0 && (
          <div class="flex flex-wrap gap-2">
            {tags.map((tag) => (
              <span class="px-2.5 py-1 bg-(--color-accent-dark)/5 border-1 border-(--color-accent-dark)/20 rounded-full text-xs font-base text-(--color-accent-dark)">
                {tag}
              </span>
            ))}
          </div>
        )
      }
    </div>
  </a>
</li>
