import { MoonStar } from "lucide-react";

import type { PageMetric } from "../contracts/page";
import { cx } from "../utils/classes";

interface PageFrameProps {
  kicker: string;
  title: string;
  status: string;
  metrics: PageMetric[];
}

export function PageFrame({ kicker, title, status, metrics }: PageFrameProps) {
  return (
    <section className="page-frame" aria-labelledby="page-title">
      <header className="page-header">
        <div>
          <p className="page-kicker">{kicker}</p>
          <h1 id="page-title" className="page-title">
            <MoonStar size={22} aria-hidden="true" />
            {title}
          </h1>
        </div>
        <span className="page-status">{status}</span>
      </header>
      {metrics.length > 0 && (
        <dl className="page-summary-strip" aria-label={`${title} 快速状态`}>
          {metrics.map((metric) => (
            <div key={metric.label} className={cx("page-summary-chip", `summary-tone-${metric.tone}`)}>
              <dt>{metric.label}</dt>
              <dd>{metric.value}</dd>
            </div>
          ))}
        </dl>
      )}
    </section>
  );
}