'use client';

import { Box, List, ListItemButton, ListItemText } from '@mui/material';
import { usePathname } from 'next/navigation';
import { IconCard, IconPage, IconProducts, IconSettings } from '@/components/common/Icons';

const menuItems = [
    { value: '', label: 'Mahsulotlar', icon: IconProducts },
    { value: '/user-data', label: "Ma'lumotlarim", icon: IconPage },
    // { value: '/id-and-address', label: "ID / Adres", icon: IconCard },
    { value: '/settings', label: "Sozlamalar", icon: IconSettings },
];

export function ISidebar({ locale }: { locale: string }) {
    const pathname = usePathname();

    return (
        // <Box width={{xs: 86, md: 240}} bgcolor='#fff' p={2}>
        <Box display={{xs: 'flex', md: 'block'}} bgcolor='#fff' p={2}>
            {/*<List disablePadding>*/}
            <List disablePadding sx={{display: {xs: 'flex', md: 'inline-block'}, marginX: 'auto'}}>
                {menuItems.map(item => (
                    <ListItemButton
                        key={item.value}
                        href={`/${locale}/profile/${item.value}`}
                        selected={pathname.split('profile').at(-1) === item.value}
                        sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}
                    >
                        {!!item.icon && <item.icon color={pathname.split('profile').at(-1) === item.value ? '#758CA3' : '#777'} />}
                        <ListItemText primary={item.label} sx={{ fontWeight: 500, display: {xs: "none", md: "block" }}}  />
                    </ListItemButton>
                ))}
            </List>
        </Box>
    );
}