'use client'

import { useState } from "react";

// Tabs
import Turns from "./tabs/turns";
import DetailUser from "./tabs/detailUser";
import Comments from "./tabs/comments";
import Messages from "./tabs/messages";
import Tabs from "@/app/component/Tabs";
import Transactions from "./tabs/transactions";

const listTab = ['حساب کاربری', 'نوبت های من', 'تراکنش های من', 'نظرات من', 'پیام ها'];

function ContentTabs({ user }) {

    const [value, setValue] = useState(0);
    const handleChange = (event, newValue) => setValue(newValue);
    const components = [
        <DetailUser user={user} />,
        <Turns user={user} />,
        <Transactions user={user} />,
        <Comments user={user} />,
        <Messages />
    ]

    return (
        <div className="mt-[24px] pt-[12px] pb-[24px] w-full bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px] bg-[#FFF]">
            <Tabs
                style={{
                    '.MuiTabs-indicator': {
                        height: '2px',
                        borderRadius: '16px',
                        background: '#5559CE',
                    },
                    '& .MuiTabs-scroller': {
                        borderBottom: '1px solid #EFEFEF',
                    },
                    '& .MuiTabs-flexContainer': {
                        paddingRight: '15px',
                        paddingLeft: '15px',
                    },
                    '& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
                        color: '#5559CE !important'
                    },
                    '& .MuiButtonBase-root.Mui-selected': {
                        color: '#5559CE !important'
                    }
                }}
                value={value}
                color='#5559CE'
                listTab={listTab}
                handleChange={handleChange}
            />
            <div className="mt-[36px] px-[24px]">
                {components[value]}
            </div>
        </div>
    )
}

export default ContentTabs