---
interface Props {
  tag: string;
  index: number;
  className?: string;
}

const { tag, index, className = '' } = Astro.props;

// Color mapping based on tag content for variety
const getColorClass = (tag: string) => {
  const tagLower = tag.toLowerCase();
  if (tagLower.includes('meta') || tagLower.includes('learning')) return 'highlighter-yellow';
  if (tagLower.includes('debug') || tagLower.includes('tools')) return 'highlighter-pink';
  if (tagLower.includes('ai') || tagLower.includes('automation')) return 'highlighter-blue';
  if (tagLower.includes('script') || tagLower.includes('code')) return 'highlighter-green';
  return 'highlighter-yellow'; // default
};

const colorClass = getColorClass(tag);
---

<span class={`highlighter-tag ${colorClass} ${className} inline-block text-xs font-bold px-2.5 py-1 rounded cursor-pointer transition-all duration-200 relative overflow-hidden group`} data-tag={tag}>
  <span class="relative z-10">{tag}</span>
</span>

<style>
  /* Enhanced hover effects */
  .highlighter-tag {
    transform: rotate(-1deg) translateY(0);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .highlighter-tag:hover {
    transform: rotate(-2deg) translateY(-2px) scale(1.05);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
  }

  /* Staggered entrance animation */
  @keyframes tagPopIn {
    from {
      opacity: 0;
      transform: rotate(-1deg) scale(0.8) translateY(5px);
    }
    to {
      opacity: 1;
      transform: rotate(-1deg) scale(1) translateY(0);
    }
  }

  .highlighter-tag {
    animation: tagPopIn 0.3s ease-out both;
    animation-delay: calc(var(--tag-index, 0) * 0.05s);
  }

  /* Color variations with gradients */
  .highlighter-yellow {
    background: linear-gradient(135deg, rgba(255, 235, 59, 0.95) 0%, rgba(255, 213, 79, 0.95) 100%);
    color: #3f2f00;
  }

  .highlighter-pink {
    background: linear-gradient(135deg, rgba(255, 167, 209, 0.95) 0%, rgba(255, 122, 175, 0.95) 100%);
    color: #3f0018;
  }

  .highlighter-green {
    background: linear-gradient(135deg, rgba(129, 199, 132, 0.95) 0%, rgba(102, 187, 106, 0.95) 100%);
    color: #002f0a;
  }

  .highlighter-blue {
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.95) 0%, rgba(66, 165, 245, 0.95) 100%);
    color: #001f3f;
  }

  /* Hover glow effect */
  .highlighter-tag:hover::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: inherit;
    filter: blur(8px);
    opacity: 0.4;
    z-index: -1;
    border-radius: inherit;
  }

  /* Click effect */
  .highlighter-tag:active {
    transform: rotate(-1deg) translateY(0) scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Focus effect for accessibility */
  .highlighter-tag:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    transform: rotate(-1deg) translateY(-2px) scale(1.05);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 3px 3px 0 rgba(0, 0, 0, 0.15);
  }
</style>

<script>
  // Add click handler for tag filtering
  if (typeof document !== 'undefined') {
    document.addEventListener('DOMContentLoaded', () => {
      const tags = document.querySelectorAll('.highlighter-tag');
      tags.forEach(tagElement => {
        tagElement.addEventListener('click', (e) => {
          const tag = tagElement.getAttribute('data-tag');
          if (tag && typeof (window as any).filterByTag === 'function') {
            (window as any).filterByTag(tag);
          }
        });
      });
    });
  }
</script>