---
import specs from "blume:openapi";
import { withBase } from "../islands/base-path.ts";
import MethodBadge from "./MethodBadge.astro";

// The operation-link list for one tag section of an API overview page. The
// section heading itself is emitted by `overviewMdx` as a markdown `##` — so it
// flows into the table of contents — and this component renders only the list
// of operations beneath it.
interface Props {
  source: string;
  /** Tag slug (`ApiOperationRef.tagSlug`) selecting this section's operations. */
  tag: string;
}

const { source, tag } = Astro.props;
const operations = Object.values(specs[source]?.operations ?? {}).filter(
  (operation) => operation.tagSlug === tag
);
---

{
  operations.length > 0 && (
    <ul class="not-prose my-4 flex list-none flex-col gap-2 p-0">
      {operations.map((operation) => (
        <li>
          <a
            class="flex items-start gap-3 rounded-blume border border-border p-3 text-inherit no-underline! transition-colors hover:border-accent hover:bg-muted hover:no-underline!"
            href={withBase(operation.route)}
          >
            <MethodBadge class="mt-0.5 shrink-0" method={operation.method} />
            {/* Title over path, stacked, so a long summary and a long route each
                get the full row width instead of being squeezed side by side. */}
            <div class="flex flex-col gap-0.5">
              <span class="break-words font-medium text-foreground text-sm">
                {operation.summary || operation.path}
              </span>
              {/* The path doubles as the label when the spec sets no summary, so
                  only repeat it as the reference line when it adds information;
                  break-all keeps a long route wrapping inside the card. */}
              {operation.summary && (
                <code class="break-all text-muted-foreground text-xs">
                  {operation.path}
                </code>
              )}
            </div>
          </a>
        </li>
      ))}
    </ul>
  )
}