import { InsightCard } from "../../components/InsightCard";
import type { DerivedMetrics } from "../../lib/deriveMetrics";

export function InsightsSection({ derived }: { derived: DerivedMetrics }) {
  const shown = derived.insights.filter((i) => i.severity !== "info").slice(0, 3);
  if (shown.length === 0) return null;

  return (
    <section id="insights" className="scroll-mt-16">
      <div className="mb-4 border-b border-slate-100 pb-3">
        <h2 className="text-[18px] font-semibold text-slate-900 tracking-tight">Key Insights</h2>
        <p className="text-[12px] text-slate-400 mt-0.5">Auto-generated from session data</p>
      </div>
      <div className="grid md:grid-cols-3 gap-3">
        {shown.map((insight) => (
          <InsightCard key={insight.id} insight={insight} />
        ))}
      </div>
    </section>
  );
}
