import { Link } from 'react-router-dom'
import styles from './Inventory.module.css'
import { PrimitivesSection } from './sections/PrimitivesSection'
import { CompositesSection } from './sections/CompositesSection'
import { LayoutSection } from './sections/LayoutSection'

const NAV_ITEMS = [
  { label: 'Primitives', href: '#primitives' },
  { label: 'Composites', href: '#composites' },
  { label: 'Layout', href: '#layout' },
]

export function Inventory() {
  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <h1 className={styles.headerTitle}>Component Inventory</h1>
        <Link to="/" className={styles.backLink}>← Back to app</Link>
      </header>

      <div className={styles.body}>
        <nav className={styles.nav} aria-label="Component categories">
          <div className={styles.navSection}>
            <span className={styles.navLabel}>Categories</span>
            {NAV_ITEMS.map((item) => (
              <a key={item.href} href={item.href} className={styles.navLink}>
                {item.label}
              </a>
            ))}
          </div>
        </nav>

        <main className={styles.content}>
          <PrimitivesSection />
          <CompositesSection />
          <LayoutSection />
        </main>
      </div>
    </div>
  )
}