"use client";
import { useState } from "react";
import styles from "../../modules/commonstyle/dattabale.module.css";
import CountryForm from "./Form/CountryForm";
import { useModulePermissions } from "@/lib/api/hooks/useModulePermissions";
import { useRouter } from "next/navigation";

interface Props { refreshData?: () => void; }

export default function CountryHeader({ refreshData }: Props) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const router = useRouter();
  const { canPerform, isReady } = useModulePermissions("countries");

  return (
    <>
      <div className={styles.header}>
        <div className={styles.headerLeft}>
          <h1 className={styles.title}>Countries Module</h1>
          <p className={styles.subtitle}>Manage Countries and Regions</p>
        </div>
        <div className={styles.headerRight}>
          {canPerform("export") && (
            <button className={styles.btnSecondary} onClick={() => router.push("/modules/countries/report")}>
              📊 Reports
            </button>
          )}
          {canPerform("create") && (
            <button className={styles.btnPrimary} onClick={() => setIsModalOpen(true)}>
              ＋ New Country
            </button>
          )}
        </div>
      </div>

      {isModalOpen && (
        <CountryForm
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          refreshData={refreshData}
        />
      )}
    </>
  );
}