---
import type { FeaturedItem } from '../lib/types';

interface Props {
  item: FeaturedItem;
}

const { item } = Astro.props;
---

<a
  href={item.url}
  class="group flex items-center gap-3 p-4 bg-[var(--color-card-bg)] rounded-md border border-[var(--color-border)] hover:bg-[var(--color-card-hover)] hover:border-[var(--color-accent)] transition-all duration-150"
>
  <div class="w-11 h-11 rounded-sm bg-[var(--color-surface-2)] border border-[var(--color-border)] flex items-center justify-center shrink-0 p-2">
    <img src={item.logo} alt={item.name} class="w-full h-full object-contain" loading="lazy" onerror="this.style.display='none'" />
  </div>
  <div class="min-w-0 flex-1">
    <div class="flex items-center gap-2">
      <span class="font-ui-mono text-[13px] font-bold text-[var(--color-text-primary)] group-hover:text-[var(--color-accent)] transition-colors">{item.name}</span>
      <span class="font-ui-mono text-[10px] font-medium px-2 py-0.5 rounded border border-[var(--color-border)] text-[var(--color-text-tertiary)] bg-[var(--color-surface-2)]">
        {item.tag}
      </span>
    </div>
    <p class="text-[12px] text-[var(--color-text-secondary)] mt-1 leading-[1.5]">{item.description}</p>
  </div>
  <span class="terminal-prompt text-[12px] opacity-0 group-hover:opacity-100 transition-opacity shrink-0">›</span>
</a>