<script>
  // 서적·표준·매뉴얼 탭 — 필터 프리셋(전용 뷰는 50건+ 게이트 뒤, plan Phase 3).
  import SafetyDocList from '../SafetyDocList.svelte';

  const KINDS = [
    { value: 'standard', label: '표준 (NB 등)' },
    { value: 'book', label: '서적' },
    { value: 'manual', label: '매뉴얼' },
    { value: 'paper', label: '논문' },
  ];
  let kind = $state('standard');
</script>

<div class="flex flex-col gap-3">
  <div class="flex items-center gap-1" role="group" aria-label="자료유형">
    {#each KINDS as k}
      <button
        type="button"
        onclick={() => (kind = k.value)}
        class="px-3 py-1 rounded-md text-sm font-medium transition-colors
          {kind === k.value ? 'bg-accent/15 text-accent' : 'text-dim hover:bg-surface hover:text-text'}"
      >
        {k.label}
      </button>
    {/each}
  </div>

  <SafetyDocList materialType={kind} />
</div>
