sarlink-portal/components/account-information.tsx

"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>
  );
}