"use client"
import React, { Dispatch, SetStateAction, useState } from 'react'
import { Profile } from './Profile'
import { Subscriptions } from './Subscriptions'
import { Invoices } from './Invoices'

export const AccountDetails = () => {
    const [selected, setSelected] = useState<string>('profile')
    return (
        <div className='grid md:grid-cols-3 gap-10 '>
            <Menu selected={selected} setSelected={setSelected} />
            <MenuContent selected={selected} setSelected={setSelected} />
        </div>
    )
}


export const Menu = ({ selected, setSelected }: { selected: string, setSelected: Dispatch<SetStateAction<string>> }) => {
    return (
        <div className=" w-full h-[200px] p-4 bg-white rounded-[20px] border border-zinc-300 flex-col justify-start items-end inline-flex gap-1">
            <ItemMenu selected={selected} setSelected={setSelected} />
        </div>
    )
}



export const ItemMenu = ({ selected, setSelected }: { selected: string, setSelected: Dispatch<SetStateAction<string>> }) => {
    const list = [
        { name: 'profile', title: 'الملف الشخصي' },
        { name: 'subscriptions', title: 'الاشتراك' },
        { name: 'invoices', title: 'الفواتير' },
    ]

    return (
        <>

            {list.map((item, index) =>
                <div
                    key={index}
                    onClick={() => setSelected(item.name)}
                    className={`cursor-pointer self-stretch p-4 ${selected == item.name && "bg-neutral-100"} hover:bg-neutral-100 rounded-2xl justify-start items-center inline-flex`}>
                    <div className="grow shrink basis-0 self-stretch text-right text-black text-opacity-90 text-base font-bold font-['Alexandria'] leading-normal">{item.title}</div>
                </div>
            )
            }
        </>

    )
}

export const MenuContent = ({ selected, setSelected }: { selected: string, setSelected: Dispatch<SetStateAction<string>> }) => {
    return (
        <div className='md:col-span-2 w-full flex flex-col justify-center items-center gap-8 '>
            {selected == "profile" && <div className='grid md:grid-cols-2 w-full'>
                <Profile />
            </div>}
            {selected == "subscriptions" && <Subscriptions />}
            {selected == "invoices" && <Invoices />}
        </div>
    )
}