---
// FileTabs — the package-file switcher inside the preview surface.
//
// A horizontal scroll of buttons, one per file in the submitted package
// (SKILL.md + references + scripts + templates). Click handling and the
// fetch-state machine are task 16's job; this component ships zero JS.
//
// `aria-label` is on the nav itself so the tablist announces as a unit.
// The `active` class on the selected file mirrors the legacy CSS so the
// verification engineer can re-point scripts/verify.mjs assertions without
// renaming.

interface PackageFile {
  /** File name without directory prefix; the row label. */
  name: string;
  /** Kind tag rendered as the small uppercase eyebrow above the name. */
  kind: string;
  /** Absolute or repo-relative path used to fetch the source. */
  path: string;
}

interface Props {
  files: PackageFile[];
  /** Name of the currently-selected file. */
  currentFile?: string;
  /** Accessible label for the tablist. Defaults to the skill-package label. */
  ariaLabel?: string;
}

const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
---

<nav class="file-tabs" aria-label={ariaLabel}>
  {
    files.map((file) => (
      <button
        type="button"
        class={file.name === currentFile ? 'active' : ''}
        aria-pressed={file.name === currentFile}
        data-file={file.name}
      >
        <span>{file.kind}</span>
        {file.name}
      </button>
    ))
  }
</nav>

<style>
  /* The dark-on-dark tab strip. Sits inside the preview surface, which is
     the only dark block in the review panel. */
  .file-tabs {
    display: flex;
    gap: 1px;
    overflow-x: auto;
    padding: 10px 14px;
    background: var(--deep);
    border-bottom: 1px solid var(--line);
  }

  .file-tabs button {
    display: grid;
    gap: 1px;
    min-width: max-content;
    padding: 7px 10px;
    color: var(--paper);
    background: transparent;
    border: 1px solid var(--line);
    cursor: pointer;
    text-align: left;
    font:
      11px ui-monospace,
      monospace;
  }

  .file-tabs button span {
    color: var(--gold);
    font-size: var(--step-09);
    text-transform: uppercase;
  }

  .file-tabs button.active,
  .file-tabs button:hover {
    color: var(--deep);
    background: var(--gold);
  }

  .file-tabs button.active span,
  .file-tabs button:hover span {
    color: var(--deep);
  }

  .file-tabs button:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 2px;
  }
</style>