"use client";

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

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

function UserAccountPage({data}) {
  const [value, setValue] = useState(1);

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

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

  return (
    <div
      className="
        opacity-page rounded-[8px] bg-transparent md:bg-[#FFF] 
        shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] py-0 md:py-[16px] lg:py-[32px]
        px-0 sm:px-[14px] md:px-[24px] lg:px-[44px] xl:px-[112px] 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;