import { type ReactNode } from 'react';

import Paper from '@material-hu/mui/Paper';
import Stack from '@material-hu/mui/Stack';

import HuTitle from '@material-hu/components/design-system/Title';

type UserListSectionProps = {
  title?: string;
  titleVariant?: 'S' | 'M' | 'L';
  children: ReactNode;
};

const UserListSection = ({
  title,
  titleVariant = 'M',
  children,
}: UserListSectionProps) => {
  return (
    <Stack sx={{ gap: 1, width: '100%' }}>
      {title && (
        <HuTitle
          variant={titleVariant}
          title={title}
        />
      )}
      <Paper
        variant="outlined"
        sx={{
          borderRadius: 2,
          overflow: 'hidden',
          borderColor: 'divider',
          width: '100%',
        }}
      >
        <Stack
          component="ul"
          sx={{
            width: '100%',
            minWidth: 0,
            p: 0,
            m: 0,
            listStyle: 'none',
            '& > li + li': {
              borderTop: 1,
              borderColor: 'divider',
            },
          }}
        >
          {children}
        </Stack>
      </Paper>
    </Stack>
  );
};

export default UserListSection;
