seec-analysis/components/MetricsHeader.tsx

"use client";

import { ArrowLeft } from "lucide-react";
import { useRouter } from "next/navigation";

export default function MetricsHeader({ metricId }: { metricId: string }) {
  const router = useRouter();

  const getMetricTitle = (id: string) => {
    const category = id.charAt(0).toUpperCase();
    switch (category) {
      case "K":
        return "知识掌握指标详情";
      case "A":
        return "AI 辅助指标详情";
      case "S":
        return "软件工程指标详情";
      case "D":
        return "态度与协作指标详情";
      default:
        return "能力指标详情";
    }
  };

  return (
    <header className="h-16 px-4 md:px-6 flex items-center justify-between sticky top-0 z-50 bg-surface/90 backdrop-blur-md border-b border-outline-variant">
      <div className="flex items-center gap-4">
        <button
          onClick={() => router.back()}
          className="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-variant transition-colors text-on-surface cursor-pointer"
        >
          <ArrowLeft className="w-6 h-6" />
        </button>
        <h1 className="text-xl font-medium tracking-tight text-on-surface">
          {getMetricTitle(metricId)}
        </h1>
      </div>
      <div className="flex items-center gap-3">
        <div className="hidden md:flex items-center gap-2">
          <span className="w-8 h-8 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center text-sm font-bold">
            67
          </span>
        </div>
      </div>
    </header>
  );
}