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

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

const ActivitySkeleton = () => {
  return (
    <Stack
      sx={{
        px: 1,
        flexDirection: 'row',
        alignItems: 'center',
        py: 1,
        gap: 1,
      }}
    >
      <HuSkeleton
        variant="circular"
        width={38}
        height={36}
      />
      <Stack>
        <HuSkeleton
          variant="text"
          width={100}
          height={12}
        />
        <HuSkeleton
          variant="text"
          width={250}
          height={40}
        />
        <HuSkeleton
          variant="text"
          width={180}
          height={20}
        />
      </Stack>
    </Stack>
  );
};

const ActivitiesSkeleton = () => {
  return (
    <Stack sx={{ p: 2 }}>
      {Array.from({ length: 3 }).map((_, index) => (
        <ActivitySkeleton key={index} />
      ))}
    </Stack>
  );
};

export { ActivitySkeleton };
export default ActivitiesSkeleton;
