app/frontend/src/components/RouteMatrix.tsx

import { useState } from "react";
import type { RouteMatrixEntry } from "../content/types";

interface RouteMatrixProps {
  routes: RouteMatrixEntry[];
}

export function RouteMatrix({ routes }: RouteMatrixProps) {
  const [activeRoute, setActiveRoute] = useState(routes[0]?.route ?? "");
  const selected = routes.find((route) => route.route === activeRoute) ?? routes[0];

  return (
    <div className="matrix-layout">
      <div className="matrix-list" role="tablist" aria-label="Route matrix">
        {routes.map((route) => (
          <button
            key={route.route}
            type="button"
            className={route.route === selected.route ? "route-card active" : "route-card"}
            onClick={() => setActiveRoute(route.route)}
          >
            <strong>{route.route}</strong>
            <span>{route.useCase}</span>
          </button>
        ))}
      </div>
      <div className="matrix-detail">
        <div className="detail-head">
          <h3>{selected.route}</h3>
          <span className="route-pill">{selected.outputType}</span>
        </div>
        <p>{selected.notes}</p>
        <dl className="detail-grid">
          <div>
            <dt>Use case</dt>
            <dd>{selected.useCase}</dd>
          </div>
          <div>
            <dt>UI surface</dt>
            <dd>{selected.uiSurface}</dd>
          </div>
          <div>
            <dt>Models</dt>
            <dd>{selected.models.join(", ")}</dd>
          </div>
        </dl>
        <table className="matrix-table">
          <thead>
            <tr>
              <th>Route</th>
              <th>Use case</th>
              <th>Output</th>
              <th>UI surface</th>
            </tr>
          </thead>
          <tbody>
            {routes.map((route) => (
              <tr key={route.route}>
                <td>{route.route}</td>
                <td>{route.useCase}</td>
                <td>{route.outputType}</td>
                <td>{route.uiSurface}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}