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 ApprovalGroupSkeleton = () => {
  return (
    <HuCardContainer
      fullWidth
      padding={0}
    >
      <Stack sx={{ p: 2, gap: 1 }}>
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1.5 }}>
          <HuSkeleton
            variant="circular"
            width={40}
            height={40}
          />
          <Stack sx={{ gap: 0.5, flex: 1 }}>
            <HuSkeleton
              height={18}
              width={120}
            />
            <HuSkeleton
              height={14}
              width={200}
            />
          </Stack>
          <HuSkeleton
            height={24}
            width={150}
          />
        </Stack>
      </Stack>
    </HuCardContainer>
  );
};

export default ApprovalGroupSkeleton;
