"use client";

import { useEffect, useState } from "react";
import Account from "./account";
import Bank from "./bank";
import Tab from "./Tab";

const listTab = ["حساب کاربری", "حساب بانکی"];

function UserAccountPage({ data }) {
  const [value, setValue] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  const handleChange = (event, newValue) => setValue(newValue);

  const components = [<Account />, <Bank loading={loading} data={data.bank} />];

  return (
    <div
      className="
        opacity-page rounded-[8px] bg-transparent md:bg-[#FFF] min-h-[80vh]
        shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] py-0 md:py-[7px] lg:py-[14px] lg:!pb-[24px]
        px-0 sm:px-[18px] md:px-[36px] lg:px-[44px] xl:px-[56px] dark:shadow-[0px_4px_25px_10px_#1F1D2B] dark:bg-transparent md:dark:bg-[#222433]
      "
    >
      <Tab listTab={listTab} handleChange={handleChange} value={value} />
      <div className="mt-[22px]">{components[value]}</div>
    </div>
  );
}

export default UserAccountPage;