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

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';

const ListLayoutSkeleton = () => {
  return (
    <Stack sx={{ gap: 3 }}>
      <Stack sx={{ flexDirection: 'row', gap: 3 }}>
        <HuSkeleton sx={{ flex: 1, height: '56px' }} />
        <HuSkeleton sx={{ width: '80px', height: '56px' }} />
      </Stack>
      <HuSkeleton sx={{ width: '100%', height: '56px' }} />
      <Stack sx={{ gap: 2 }}>
        {Array.from({ length: 6 }, (_, i) => (
          <HuCardContainer
            key={i}
            padding={16}
            fullWidth
          >
            <Stack sx={{ gap: 1, flexDirection: 'row', alignItems: 'center' }}>
              <HuSkeleton
                variant="circular"
                width={40}
                height={40}
              />
              <Stack sx={{ gap: 1, width: 1 }}>
                <HuSkeleton
                  sx={{ width: '100%' }}
                  height={24}
                />
                <HuSkeleton
                  width={162}
                  height={12}
                />
              </Stack>
            </Stack>
          </HuCardContainer>
        ))}
      </Stack>
    </Stack>
  );
};

export default ListLayoutSkeleton;
