import React from 'react'
import { Box, Stack, Typography } from '@mui/material'
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import Link from 'next/link'
import { SidebarNavItem } from '@/utils/types'
import { usePathname } from 'next/navigation';

interface SidebarNavItemsProps {
  items: SidebarNavItem[]
}

const SidebarNav = ({ items }: SidebarNavItemsProps) => {
  const path = usePathname();

  if (!items?.length) {
    return null
  }

  return (
    <Stack spacing={1} direction={'column'}>
      {items.map((item, index) => {
        const Icon = item.icon || <ArrowForwardIcon />
        return (
          item.href && (
            <Link 
              href={item.disabled ? '' : item.href}
              key={index}
            >
              <Box
                sx={{
                  borderRadius: '8px',
                  px: '.75rem',
                  py: '.5rem',
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                  cursor: item.disabled ? 'not-allowed' : 'initial',
                  backgroundColor: item.href === path ? '#00000010' : 'initial',
                  '&:hover': {
                    backgroundColor: '#00000010',
                  }
                }}
              >
                {Icon}
                <Typography variant='body2' marginLeft={'7px'}>{item.title}</Typography>
              </Box>
            </Link>
          )
        )
      })}
    </Stack>
  )
}

export default SidebarNav