"use client";

import React from "react";
import TemplateAnalytics from "./TemplateAnalytics";
import type { TemplateRow } from "@/lib/api/types/template.types";

interface Props {
  templates:   TemplateRow[];
  stageFilter?: string;
  typeFilter?:  string;
}

export default function TemplateAnalyticsInline({ templates, stageFilter, typeFilter }: Props) {
  return (
    <div style={{ marginBottom: "20px", padding: "16px", backgroundColor: "#f0fdfa", borderRadius: "12px", border: "1px solid #99f6e4" }}>
      <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "16px" }}>
        <span style={{ fontSize: "16px" }}>📊</span>
        <h2 style={{ margin: 0, fontSize: "14px", fontWeight: 700, color: "#0f766e" }}>Template Analytics</h2>
        <span style={{ marginLeft: "auto", fontSize: "12px", color: "#6b7280" }}>{templates.length} templates</span>
      </div>
      <TemplateAnalytics templates={templates} stageFilter={stageFilter} typeFilter={typeFilter} />
    </div>
  );
}