<script>
  // 재해사례 탭 — material_type=incident (KOSHA 사고사망·재해사례·CSB 등).
  // 케이스 그룹핑(boardno 본문+첨부 1카드)은 API 확장 필요라 후속(DS freeze 하 백엔드 무변경).
  import SafetyDocList from '../SafetyDocList.svelte';

  const JURISDICTIONS = [
    { value: '', label: '전체' },
    { value: 'KR', label: 'KR' },
    { value: 'US', label: 'US' },
  ];
  let jurisdiction = $state('');
</script>

<div class="flex flex-col gap-3">
  <div class="flex items-center gap-1.5" role="group" aria-label="관할 필터">
    {#each JURISDICTIONS as j}
      <button
        type="button"
        onclick={() => (jurisdiction = j.value)}
        class="px-2.5 py-1 rounded-full text-xs font-medium transition-colors
          {jurisdiction === j.value ? 'bg-accent/15 text-accent' : 'text-dim hover:bg-surface hover:text-text'}"
      >
        {j.label}
      </button>
    {/each}
  </div>

  <SafetyDocList materialType="incident" {jurisdiction} />
</div>
