"use client";
import PageHeader from "@/components/PageHeder";
import ActionButton from "@/components/action-button";
import InvoiceReports from "@/components/invoices/invoice-reports";
import { usePermission } from "@/utils/auth/permission";
import Link from "next/link";
import { FC, useState } from "react";
import { HiPlus } from "react-icons/hi";

type props = {
  reports: InvoiceReports;
  invoiceCount: number;
};
const InvoiceHeader: FC<props> = ({ reports, invoiceCount }) => {
  const [isLoading, setLoading] = useState(false);
  return (
    <>
      <div>
        <PageHeader>
          <div className="flex justify-between">
            <h2 className="text-xl font-semibold">Invoices ({invoiceCount})</h2>
            {usePermission("invoices.create") && (
              <div className="">
                <div>
                  <Link href={"/invoices/create"}>
                    <ActionButton
                      type="any"
                      isLoading={isLoading}
                      onClick={() => setLoading(true)}
                      size="sm"
                    >
                      <div className="flex">
                        {!isLoading && <HiPlus className="text-lg mt-0.5" />}
                        <span>Add</span>
                      </div>
                    </ActionButton>
                  </Link>
                </div>
              </div>
            )}
          </div>
        </PageHeader>
        <div>
          <InvoiceReports reports={reports} />
        </div>
      </div>
    </>
  );
};

export default InvoiceHeader;