<script lang="ts">
  interface Props {
    href: string;
    title: string;
    description: string;
    icon: string;
    category: string;
    status?: 'live' | 'coming-soon';
    external?: boolean;
  }

  let { href, title, description, icon, category, status = 'live', external = false }: Props = $props();

  function getCategoryColor(cat: string): string {
    switch (cat.toUpperCase()) {
      case 'INTERACTIVE':
        return 'bg-purple-100 text-purple-700';
      case 'STATISTICS':
        return 'bg-blue-100 text-blue-700';
      case 'VISUALIZATION':
        return 'bg-green-100 text-green-700';
      case 'ML':
        return 'bg-orange-100 text-orange-700';
      case 'EDA':
        return 'bg-teal-100 text-teal-700';
      case 'TOOL':
        return 'bg-indigo-100 text-indigo-700';
      default:
        return 'bg-gray-100 text-gray-700';
    }
  }
</script>

{#if status === 'coming-soon'}
  <div class="group block p-6 bg-white rounded-2xl border border-gray-100 opacity-75">
    <div class="flex items-start justify-between mb-4">
      <div class="w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center">
        <span class="text-2xl grayscale">{icon}</span>
      </div>
      <span class="text-xs font-medium px-2 py-1 rounded-full bg-gray-100 text-gray-500">
        Coming Soon
      </span>
    </div>

    <h3 class="text-lg font-semibold text-gray-400 mb-2">
      {title}
    </h3>

    <p class="text-gray-400 text-sm leading-relaxed">
      {description}
    </p>
  </div>
{:else}
  <a
    {href}
    class="group block p-6 bg-white rounded-2xl border border-gray-100 card-hover"
    target={external ? '_blank' : undefined}
    rel={external ? 'noopener noreferrer' : undefined}
  >
    <div class="flex items-start justify-between mb-4">
      <div class="w-12 h-12 rounded-xl bg-primary-50 flex items-center justify-center transition-transform group-hover:scale-110">
        <span class="text-2xl">{icon}</span>
      </div>
      <span class="text-xs font-medium px-2 py-1 rounded-full {getCategoryColor(category)}">
        {category}
      </span>
    </div>

    <h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-primary-600 transition-colors">
      {title}
    </h3>

    <p class="text-gray-600 text-sm leading-relaxed">
      {description}
    </p>

    <div class="mt-4 flex items-center text-primary-600 text-sm font-medium">
      <span>{external ? 'Open' : 'Explore'}</span>
      <svg class="w-4 h-4 ml-1 transition-transform group-hover:translate-x-1" 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"></path>
      </svg>
    </div>
  </a>
{/if}
