import { Stack } from '@mui/material';

import Title from '../../../../design-system/Title';

import SubSidebarCollapsableItem from './SubSidebarCollapsableItem';
import { type SubSidebarSectionsProps } from './types';

const SubSidebarSections = ({
  sections,
  id,
  value,
  handleClickItem,
}: SubSidebarSectionsProps) => {
  if (!sections) return null;

  return (
    <>
      {sections.map(section => (
        <Stack
          id={`${id}-section-${section.value}`}
          key={`${id}-section-${section.value}`}
          sx={{ gap: 3 }}
        >
          {section.title && (
            <Title
              variant="M"
              title={section.title}
              sx={{ px: 1 }}
            />
          )}
          <Stack sx={{ gap: 1.5 }}>
            {section.items.map(item => (
              <SubSidebarCollapsableItem
                id={`${id}-section-${section.value}-item-${item.value}`}
                key={`${id}-section-${section.value}-item-${item.value}`}
                {...item}
                currentValue={value}
                handleClickItem={handleClickItem}
              />
            ))}
          </Stack>
        </Stack>
      ))}
    </>
  );
};

export default SubSidebarSections;
