refactor: use single seperate AccountInfomation component and integrate it into DevicesToPay and TopupToPay components 🔨

components/account-information.tsx

@@ -0,0 +1,56 @@
+"use client"
+import { Clipboard, ClipboardCheck } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "./ui/button";
+
+export function AccountInfomation({
+  accountNo,
+  accName,
+}: {
+  accountNo: string;
+  accName: string;
+}) {
+  const [accNo, setAccNo] = useState(false);
+  return (
+    <div className="justify-center items-center border my-4 flex flex-col gap-2 p-2 rounded-md">
+      <h6 className="title-bg uppercase p-2 border rounded w-full font-semibold">
+        Account Information
+      </h6>
+      <div className="border justify-center flex flex-col items-center bg-white/10 w-full p-2 rounded">
+        <div className="text-sm font-semibold">Account Name</div>
+        <span>{accName}</span>
+      </div>
+      <div className="border flex justify-between items-center gap-2 w-full p-2 rounded">
+        <div className="flex flex-col items-center justify-center w-full">
+          <p className="text-sm font-semibold">Account No</p>
+          <span>{accountNo}</span>
+          <Button
+            onClick={() => {
+              setTimeout(() => {
+                setAccNo(true);
+                navigator.clipboard.writeText(accountNo);
+              }, 2000);
+              toast.success("Account number copied!");
+              setAccNo((prev) => !prev);
+            }}
+            className="mt-2 w-full"
+            variant={"secondary"}
+          >
+            {accNo ? (
+              <div className="flex items-center gap-2">
+                <span>Copy Account Number</span>
+                <Clipboard />
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <span>Copy Account Number</span>
+                <ClipboardCheck color="green" />
+              </div>
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}