import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

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

const TeamRowSkeleton = () => {
  const theme = useTheme();
  const borderDefault = theme.palette.new.border.neutral.default;

  return (
    <>
      {Array(10)
        .fill(null)
        .map((_, i) => (
          <Stack key={i}>
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
                py: 1,
              }}
            >
              <Stack
                sx={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: 1,
                }}
              >
                <Skeleton
                  variant="circular"
                  width={40}
                  height={40}
                />
                <Skeleton
                  variant="text"
                  width={120}
                  height={22}
                />
              </Stack>
              <Skeleton
                variant="rectangular"
                width={40}
                height={40}
                sx={{ borderRadius: 1 }}
              />
            </Stack>
            {i < 9 && <Divider sx={{ borderColor: borderDefault, my: 1 }} />}
          </Stack>
        ))}
    </>
  );
};

export default TeamRowSkeleton;
