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

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

const AssociatedMembersSkeleton = () => {
  return (
    <Stack
      sx={{
        display: 'grid',
        gap: 2,
        width: 1,
        gridTemplateColumns: {
          xs: '1fr',
          sm: 'repeat(2, 1fr)',
          md: 'repeat(2, 1fr)',
          lg: 'repeat(3, 1fr)',
          xl: 'repeat(4, 1fr)',
        },
      }}
    >
      {Array.from({ length: 8 }).map((_, index) => (
        <HuCardContainer
          key={index}
          padding={16}
          sx={{
            width: 1,
            border: 'none',
            backgroundColor: ({ palette }) =>
              palette.new.background.layout.default,
          }}
        >
          <Stack sx={{ gap: 2, flex: 1 }}>
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 0.5,
              }}
            >
              <HuSkeleton
                variant="circular"
                width={40}
                height={40}
              />
              <Stack sx={{ gap: 0.5 }}>
                <HuSkeleton
                  height={24}
                  sx={{
                    width: {
                      xs: 140,
                      sm: 140,
                      md: 160,
                      lg: 180,
                      xl: 244,
                    },
                  }}
                />
                <HuSkeleton
                  height={12}
                  sx={{
                    width: {
                      xs: 93,
                      sm: 93,
                      md: 110,
                      lg: 120,
                      xl: 162,
                    },
                  }}
                />
              </Stack>
            </Stack>
            <HuCardContainer
              fullWidth
              sx={{
                backgroundColor: ({ palette }) =>
                  palette.new.background.layout.tertiary,
              }}
            >
              <Stack
                sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}
              >
                <Stack
                  sx={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 1,
                    flex: 1,
                  }}
                >
                  <HuSkeleton
                    variant="circular"
                    width={32}
                    height={32}
                  />
                  <HuSkeleton
                    width={47}
                    height={22}
                  />
                </Stack>
                <Divider
                  orientation="vertical"
                  flexItem
                />
                <Stack
                  sx={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 1,
                    flex: 1,
                  }}
                >
                  <HuSkeleton
                    variant="circular"
                    width={32}
                    height={32}
                  />
                  <HuSkeleton
                    width={47}
                    height={22}
                  />
                </Stack>
              </Stack>
            </HuCardContainer>
          </Stack>
        </HuCardContainer>
      ))}
    </Stack>
  );
};

export default AssociatedMembersSkeleton;
