<!--
 * CategoryTabs Component
 * A simplified, reusable component for displaying and switching between categories
 * 
 * Features:
 * - Displays a list of categories as tabs
 * - Handles category selection
 * - Shows the active category with different styling
 * - Uses Widgetic design system styling
 -->
<script lang="ts">
  // Props
  export let categories: any[] = [];
  export let activeCategory: any = null;
  export let onCategorySelect: (category: any) => void;
  export let getCategoryKey: (category: any) => string = (cat) => cat?.toString() || '';
  export let getCategoryLabel: (category: any) => string = (cat) => cat?.toString() || '';
  export let filterVisible = true;
</script>

{#if filterVisible && categories.length > 0}
  <div class="widgetic-colors widgetic-radius bg-white">
    <div class="flex justify-between px-4 pt-[24px] pb-[8px] border-b border-grey2">
      {#each categories as category, index}
        {@const isActive = getCategoryKey(activeCategory) === getCategoryKey(category)}
        <button 
          type="button"
          class="cursor-pointer caption transition-colors text-center {
            isActive 
              ? 'text-grey7' 
              : 'text-grey3 hover:text-grey5'
          }"
          onclick={() => onCategorySelect(category)}
        >
          {getCategoryLabel(category)}
        </button>
      {/each}
    </div>
  </div>
{/if}