"use client";
import FilterForm from "@/components/common/filter-form";
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 SmsSendOutList from "@/components/sms-send-out/sms-send-out-list";
import MyWallet from "@/components/wallets/my-wallet";
import { usePermission } from "@/utils/auth/permission";
import { FC, useState } from "react";

const SmsSendOutContent: FC = () => {
  const [filterValue, setFilter] = useState("#");
  return (
    <div>
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">SMS send out queue</h2>
          <MyWallet balanceType={["sms"]} />
          {usePermission("sms-send-out.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">
        <SmsSendOutList filterValue={filterValue} />
      </div>
    </div>
  );
};

export default SmsSendOutContent;