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

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

type ListLayoutProps = {
  sidebar?: React.ReactNode;
  title?: React.ReactNode;
  tabs?: React.ReactNode;
  search?: React.ReactNode;
  filter?: React.ReactNode;
  children?: React.ReactNode;
};

const ListLayout = ({
  sidebar,
  title,
  tabs,
  search,
  filter,
  children,
}: ListLayoutProps) => {
  return (
    <Stack
      sx={{
        flexDirection: 'row',
        height: '100%',
      }}
    >
      {sidebar}
      <Stack
        sx={{
          flex: 1,
          minHeight: '100%',
          overflow: 'auto',
          p: 3,
          pb: 4,
          gap: 1.25,
        }}
      >
        <Title
          variant="L"
          title={title}
        />
        <Stack sx={{ gap: 3 }}>
          {tabs}
          <Stack
            sx={{
              flexDirection: 'row',
              gap: 2,
            }}
          >
            {search}
            {filter}
          </Stack>
          {children}
        </Stack>
      </Stack>
    </Stack>
  );
};

export default ListLayout;