src/components/model/DatasetScope.tsx

import Link from "next/link";
import { ArrowUpRight } from "lucide-react";
import type { DatasetInfo } from "@/lib/types";

export interface DatasetScopeProps {
  dataset: DatasetInfo;
}

/**
 * Scope bar pinned under the model header: MedASR Bench is a multi-dataset
 * hub, so every number on a model page is measured on exactly ONE dataset.
 * Today that is the anchor (ViMedCSS); when a second dataset goes live this
 * bar is the natural home for a dataset switcher.
 */
export default function DatasetScope({ dataset }: DatasetScopeProps) {
  const stats = [
    typeof dataset.hours === "number" ? `${dataset.hours} h` : null,
    typeof dataset.utterances === "number"
      ? `${dataset.utterances.toLocaleString("en-US")} utts`
      : null,
    typeof dataset.csTerms === "number"
      ? `${dataset.csTerms} CS terms`
      : null,
  ].filter((s): s is string => s !== null);

  return (
    <div className="glass depth-1 flex flex-wrap items-center justify-between gap-x-6 gap-y-2 rounded-sm px-4 py-3">
      <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
        <span className="num text-[11px] uppercase tracking-[0.18em] text-muted">
          Results on
        </span>
        <span className="font-display text-lg leading-none text-text">
          {dataset.name}
        </span>
        {dataset.fullName && (
          <span className="text-[13px] text-muted">{dataset.fullName}</span>
        )}
        {stats.length > 0 && (
          <span className="num text-[11px] text-muted">
            {stats.join(" · ")}
          </span>
        )}
      </div>
      <Link
        href={`/datasets/${dataset.id}`}
        className="num inline-flex items-center gap-1 text-[12px] tracking-wide text-text transition-colors duration-200 ease-out hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
      >
        Dataset profile
        <ArrowUpRight size={13} aria-hidden />
      </Link>
    </div>
  );
}