"use client";
import ActionButton from "@/components/action-button";
import Alerts from "@/components/Alert";
import PageHeader from "@/components/PageHeder";
import WalletForm from "@/components/wallets/bkash-wallets-form";
import MyWallet from "@/components/wallets/my-wallet";
import WalletList from "@/components/wallets/wallet-list";
import Image from "next/image";
import { useSearchParams } from "next/navigation";
import { FC, useState } from "react";
import bkashImage from "/public/static/bkash.png";

const WalletContent: FC = () => {
  const params = useSearchParams();
  const [isOpen, setOpen] = useState(false);

  return (
    <>
      <div>
        <PageHeader>
          <div className="flex justify-between !p-0">
            <h2 className="text-xl font-semibold">Wallets </h2>
            <div className="flex">
              <MyWallet />
            </div>
            <div className="flex">
              <ActionButton type="any" onClick={() => setOpen(true)}>
                <div className="flex">
                  <div className="mr-2">Recharge</div>
                  <div className="w-6 h-6">
                    <Image height={20} alt="" src={bkashImage} />
                  </div>
                </div>
              </ActionButton>
              <WalletForm isOpen={isOpen} setOpen={setOpen} />
            </div>
          </div>
        </PageHeader>
      </div>
      <div className="overflow-hidden shadow">
        {params?.get("payment") === "failure" && (
          <Alerts type={"failure"} message="Payment Filed, Please try again" />
        )}
        {params?.get("payment") === "success" && (
          <Alerts type={"success"} message="Payment success" />
        )}
        <WalletList />
      </div>
    </>
  );
};

export default WalletContent;