import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Skeleton from "@mui/material/Skeleton";
import Stack from "@mui/material/Stack";
import React from "react";

// Can make this nicer
export const EditUserLoading: React.FC = () => {
  return (
    <>
      <Card>
        <CardContent>
          <Stack spacing={2}>
            <Skeleton variant="rounded" height={60} />
            <Skeleton variant="rounded" height={60} />
            <Skeleton variant="rounded" height={60} />
            <Skeleton
              variant="rounded"
              height={50} 
              width={100}
              sx={{ alignSelf: "flex-end" }}
            />
          </Stack>
        </CardContent>
      </Card>
      <Card>EditUser
        <CardContent>
          <Stack spacing={2}>
            <Skeleton variant="rounded" height={40} />
            <Skeleton variant="rounded" height={40} />
            <Skeleton variant="rounded" height={40} />
            <Skeleton variant="rounded" height={40} />
          </Stack>
        </CardContent>
      </Card>
    </>
  );
};

export default EditUserLoading;