"use client";
import { useState, type FC } from "react";
import Button from "@/components/Button";
import CommunicationGatewayForm from "@/components/communication-gateways/communication-gateway-form";
import CommunicationGatewayList from "@/components/communication-gateways/communication-gateway-list";
import { TSCommunicationGatewaySchema } from "@/components/forms/schema/communication-gateway";
import { usePermission } from "@/utils/auth/permission";
import { HiPlus } from "react-icons/hi";

type Props = {
  gateway?: TSCommunicationGatewaySchema;
};

const CommunicationGatewayContent: FC<Props> = ({ gateway }) => {
  const [isOpen, setOpen] = useState(false);
  return (
    <>
      <div className="block items-center justify-between border-b border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
        <div className="mb-1 w-full flex items-center justify-between">
          <div className="sm:flex">
            <h1 className="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
              Communication Gateways
            </h1>
          </div>
          <div className="ml-auto flex items-center space-x-2 sm:space-x-3">
            {usePermission("communication-gateways.create") && (
              <>
                <Button color="blue" onClick={() => setOpen(true)}>
                  <HiPlus className="text-xl" />
                  Add
                </Button>
                <CommunicationGatewayForm isOpen={isOpen} setOpen={setOpen} />
              </>
            )}
            {gateway && (
              <CommunicationGatewayForm
                isOpen={isOpen}
                setOpen={setOpen}
                gateway={gateway}
                mode="edit"
              />
            )}
          </div>
        </div>
      </div>
      <div className="flex flex-col">
        <div className="overflow-x-auto">
          <div className="inline-block min-w-full align-middle">
            <div className="overflow-hidden shadow">
              <CommunicationGatewayList />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default CommunicationGatewayContent;