<script>
  // 법령·지침 탭 — 법령(law, 버전체인 current 만 코퍼스 노출) / 지침(guide, KOSHA GUIDE 등).
  // 법령 기본 관할 = KR (plan: country 누락 = KR 정규화). version_status 뱃지는 API 확장 후속.
  import SafetyDocList from '../SafetyDocList.svelte';

  const KINDS = [
    { value: 'law', label: '법령' },
    { value: 'guide', label: '지침' },
  ];
  const JURISDICTIONS = [
    { value: 'KR', label: 'KR' },
    { value: 'US', label: 'US' },
    { value: '', label: '전체' },
  ];
  let kind = $state('law');
  let jurisdiction = $state('KR');
</script>

<div class="flex flex-col gap-3">
  <div class="flex items-center justify-between flex-wrap gap-2">
    <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>
    <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>
  </div>

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