"use client";
import PageHeader from "@/components/PageHeder";
import ProductForm from "@/components/products/product-form";
import { usePermission } from "@/utils/auth/permission";
import { Button } from "flowbite-react";
import Link from "next/link";
import { FC, useState } from "react";
import { HiMinus, HiPlus } from "react-icons/hi";

const ProductContent: FC = () => {
  const [isOpen, setOpen] = useState(false);
  return (
    <PageHeader>
      <div className="flex justify-between !p-0">
        <h2 className="text-xl font-semibold">Products</h2>
        <div className="flex">
          {usePermission("products-out.create") && (
            <Link href={"/products/out"}>
              <Button className="mr-2 bg-red-500" size={"sm"}>
                <div className="flex">
                  <HiMinus className={"mr-2 mt-1"} />
                  <span>Out</span>
                </div>
              </Button>
            </Link>
          )}
          {usePermission("products-in.create") && (
            <Link href={"/products/in"}>
              <Button className="mr-2 bg-green-700" size={"sm"}>
                <div className="flex">
                  <HiPlus className={"mr-2 mt-1"} />
                  <span>In</span>
                </div>
              </Button>
            </Link>
          )}
          {usePermission("products.create") && (
            <Button color="blue" onClick={() => setOpen(true)} size={"sm"}>
              <div className="flex">
                <HiPlus className={"mr-2 mt-1"} />
                <span>Add</span>
              </div>
            </Button>
          )}
          <ProductForm isOpen={isOpen} setOpen={setOpen} />
        </div>
      </div>
    </PageHeader>
  );
};

export default ProductContent;