"use client";

import React, { useEffect, useState } from "react";
import "./My_Account.css";
import Breadcrumb_comp from "../common-components/breadcrumb-comp/Breadcrumb_comp";
import Left_Tabs from "./left_tabs/Left_Tabs";
import Ordered from "./all_tabs/ordered/Ordered";
import Personal_Info from "./all_tabs/personal_info/Personal_Info";
import Delivered from "./all_tabs/delivered/Delivered";
import Return from "./all_tabs/return/Return";
import Cancelled from "./all_tabs/cancelled/Cancelled";
import Manage_Address from "./all_tabs/manage_address/Manage_Address";
import Change_Password from "./all_tabs/change_password/Change_Password";
import Wallet from "../../components/wallet/Wallet";
const My_Account = () => {
  const breadcrumbs = [
    { label: "Home", link: "/", isActive: false },
    { label: "My Account", link: "", isActive: true },
  ];

  const [selectedTab, setSelectedTab] = useState("PERSONAL INFORMATION");

  return (
    <section className="My_Account">
      {" "}
      <Breadcrumb_comp breadcrumbs={breadcrumbs} />
      <div className="container">
        <div className="main_content_div">
          <div className="row">
            <div className="col-lg-3 col-md-3">
              <div className="tabs_holder_div">
                <Left_Tabs setSelectedTab={setSelectedTab} />
              </div>
            </div>
            <div className="col-lg-9 col-md-9">
              <div className="tabs_container">
                {selectedTab === "PERSONAL INFORMATION" && <Personal_Info />}

                {selectedTab === "Ordered" && <Ordered type={"Ordered"} />}

                {selectedTab === "Delivered" && <Delivered />}

                {selectedTab === "Return" && <Return type={"Return"} />}

                {selectedTab === "Cancelled" && <Cancelled />}

                {selectedTab === "MANAGE ADDRESS" && <Manage_Address />}
                {selectedTab === "WALLET" && <Wallet />}
                {selectedTab === "CHANGE PASSWORD" && <Change_Password />}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default My_Account;
