"use client";
import FilterForm from "@/components/common/filter-form";
import CommunicationQueueList from "@/components/communication-queue/list";
import { smsSendOutFilter } from "@/components/forms/schema/sms-send-out-filter";
import PageHeader from "@/components/PageHeder";
import SmsResendAll from "@/components/sms-send-out/sms-all-resend";
import MyWallet from "@/components/wallets/my-wallet";
import { usePermission } from "@/utils/auth/permission";
import { FC, useState } from "react";

const CommunicationQueueContent: FC = () => {
  const [filterValue, setFilter] = useState("#");
  return (
    <div>
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">Communication Queue</h2>
          <MyWallet />
          {usePermission("communication-queue.resend-all") && <SmsResendAll />}
        </div>
      </PageHeader>
      <div className="block border-t dark:border-t dark:border-gray-600">
        <FilterForm schema={smsSendOutFilter} setFilter={setFilter} grids={4} />
      </div>
      <div className="overflow-hidden shadow">
        <CommunicationQueueList filterValue={filterValue} />
      </div>
    </div>
  );
};

export default CommunicationQueueContent;