---
import { Icon } from '@prosefly/astro-components';
import type { DocsSectionNav } from '../../lib/docs';
import { resolveIconName } from '../../lib/icons';

interface Props {
  sections: DocsSectionNav[];
}

const { sections } = Astro.props;
---

<nav aria-label="Documentation sections">
  <div class="mx-auto flex h-(--lotus-subnav-height) max-w-screen-2xl items-center overflow-x-auto px-4 sm:px-6">
    <div class="lotus-scrollbar flex h-full min-w-full items-stretch gap-5">
      {sections.map((section) => (
        <a
          class:list={[
            'lotus-focus-ring lotus-subnav-link -mb-px inline-flex h-full items-center gap-1.5 border-b-2 px-1 text-sm font-medium whitespace-nowrap transition-colors',
            section.active
              ? 'border-(--lotus-accent) text-(--lotus-accent)'
              : 'border-transparent text-(--lotus-text-muted) hover:text-(--lotus-text-strong)',
          ]}
          aria-current={section.active ? 'page' : undefined}
          href={section.href}
        >
          {section.icon && (
            <Icon aria-hidden="true" class="h-4 w-4" name={resolveIconName(section.icon)} />
          )}
          <span>{section.label}</span>
        </a>
      ))}
    </div>
  </div>
</nav>