const [userId, setUserId] = useState("")

useEffect(() => {
  getUser(name)
}, [name])

const getUser = async (name: string): Promise<void> => {
  const user: any = await userAPI(name)
  setUserId(user.id)

const userAPI = async (name: string): Promise<typeUser> => {
  const response = await axios.get(`/api/user?name=${name}`);
  return response.data.body.user

const fetcher = (url) => fetch(url).then((res) => res.json())
const response = useSWR(`/api/user?name=${name}`, fetcher)
 
if (response.error) <div>Error</div>;
if (!response.data) <div>Loading...</div>;

const userId = response.data.body.user.id

const ImageBlock: React.FC<ImageBlockProps> = ({ image }) => {
  const animationVariants = {
    visible: { opacity: 1 },
    hidden: { opacity: 0 },
  }
  const animationControls = useAnimation();

  return (
    <motion.div
      initial={"hidden"}
      animate={animationControls}
      variants={animationVariants}
      transition={{ ease: "easeOut", duration: 1 }}
    >
        <div className="flex justify-center items-center p-0 rounded-md my-2 mx-2">
          <Image
            src={image.url}
            width={150}
            height={150 * image.height / image.width}
            onLoadingComplete={() => animationControls.start("visible")}
            unoptimized={true}
          />
        </div>
    </motion.div>
  );
}

export default ImageBlock;