---
// SkillPackage — the four-file skill-package picker (SKILL.md, references/,
// scripts/, assets/). Buttons carry the `data-skill-file` hook asserted by
// `scripts/verify.mjs`.
//
// Static shell: the initial file is marked active and selected. The block is
// paired with a `<article>` detail panel by the parent page; this component
// renders only the picker.

type Localized = { en: string; pt: string };

interface PackageFile {
  id: 'skill' | 'references' | 'scripts' | 'assets' | string;
  /** Path rendered inside `<code>`, e.g. "SKILL.md". */
  path: string;
  /** Helper copy under the path. */
  small: string | Localized;
}

interface Props {
  files: PackageFile[];
  initial?: string;
  packageLabel?: string | Localized;
}

const { files, initial = files[0]?.id ?? 'skill', packageLabel = 'SKILL PACKAGE' } = Astro.props;
---

<div class="skill-package" role="tree" aria-label="Skill package files">
  <span class="skill-package-label">
    {
      typeof packageLabel === 'string' ? (
        packageLabel
      ) : (
        <>
          <span data-language-content="en">{packageLabel.en}</span>
          <span data-language-content="pt" hidden>
            {packageLabel.pt}
          </span>
        </>
      )
    }
  </span>
  {
    files.map((file) => (
      <button
        class:list={['skill-package-row', { active: file.id === initial }]}
        data-skill-file={file.id}
        role="treeitem"
        aria-selected={file.id === initial}
      >
        <code>{file.path}</code>
        <small>
          {typeof file.small === 'string' ? (
            file.small
          ) : (
            <>
              <span data-language-content="en">{file.small.en}</span>
              <span data-language-content="pt" hidden>
                {file.small.pt}
              </span>
            </>
          )}
        </small>
      </button>
    ))
  }
</div>

<style>
  .skill-package {
    display: grid;
    align-content: start;
    color: var(--paper);
    background: var(--blue);
  }

  .skill-package-label {
    padding: 20px;
    color: var(--gold);
    border-bottom: 1px solid var(--white-25);
    /* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */
    font:
      500 10px 'DM Mono',
      monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .skill-package-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 17px 20px;
    border: 0;
    border-bottom: 1px solid var(--white-25);
    color: var(--paper);
    background: transparent;
    text-align: left;
    cursor: pointer;
  }
  .skill-package-row code {
    /* token-gap: source uses 12px with default weight (no 500); no --step-* covers 12px; owner design-system-keeper */
    font:
      12px 'DM Mono',
      monospace;
  }
  .skill-package-row small {
    opacity: 0.7;
  }
  .skill-package-row.active {
    /* House style: left bar via inset box-shadow, not a border. */
    box-shadow: inset 4px 0 0 var(--gold);
  }
  .skill-package-row:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: -3px;
  }
</style>