// §22.10 (M3) — the deployment directory at `/`. Renders the caller-visible
// projects (from /api/deployment) as cards linking into each project's
// `/p/<id>/` home. App's DeploymentLanding only mounts this when 2+ projects
// are visible; the N=1 case redirects straight into the single project so
// OHM's "land in the corpus" UX is preserved.
import { Link } from 'react-router-dom'
import { useDeployment } from '../context/DeploymentProvider'
import { entryNoun } from './ProjectLayout.jsx'

export default function Directory() {
  const { name, tagline, projects } = useDeployment()
  return (
    <main className="chrome-pane">
      <div className="directory">
        <h1>{name}</h1>
        {tagline && <p className="directory-tagline">{tagline}</p>}
        <ul className="directory-list">
          {projects.map(p => (
            <li key={p.id} className="directory-card">
              <Link to={`/p/${p.id}/`}>
                <span className="directory-card-name">{p.name}</span>
                <span className="directory-card-type">{entryNoun(p.type)}s</span>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </main>
  )
}