"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 { useDispatch, useSelector } from 'react-redux';
import { getAllOrder } from '../../features/order/orderSlice';

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'>
            <div className='container'>
                <Breadcrumb_comp breadcrumbs={breadcrumbs} />

                <div className='main_content_div'>
                    <div className='row'>
                        <div className='col-lg-4 col-md-3'>
                            <div className='tabs_holder_div'>
                                <Left_Tabs setSelectedTab={setSelectedTab} />
                            </div>
                        </div>
                        <div className='col-lg-8 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 === "CHANGE PASSWORD" && (
                                    <Change_Password />
                                )}


                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </section>
    )
}

export default My_Account
