"use client";

import styles from "../commonstyle/dattabale.module.css";
import { useModulePermissions } from "@/lib/api/hooks/useModulePermissions";
import { useRouter } from "next/navigation";

interface Props {
  onIssue: () => void;
}

export default function TrainingHeader({ onIssue }: Props) {
  const router = useRouter();
  // ⚠️ Using the "certificates" permission module so it works immediately.
  // Once you add a "training-certificates" module to your permission
  // config, change the string below.
  const { canPerform } = useModulePermissions("certificates");

  return (
    <div className={styles.header}>
      <div className={styles.headerLeft}>
        <h1 className={styles.title}>Training Certificates</h1>
        <p className={styles.subtitle}>
          Issue, track and verify training certificates (QRS-TRG)
        </p>
      </div>
      <div className={styles.headerRight}>
        <button
          className={styles.btnSecondary}
          style={{
            background: "linear-gradient(135deg,#0ea5e9,#0284c7)",
            color: "#fff",
            border: "none",
          }}
          onClick={() => router.push("/modules/certificates")}
          title="Company certification certificates"
        >
          📜 ISO Certificates
        </button>

        {canPerform("create") && (
          <button className={styles.btnPrimary} onClick={onIssue}>
            ＋ Issue Training Certificate
          </button>
        )}
      </div>
    </div>
  );
}