app.image("/review-image/:toFid", async (c) => {
  const { toFid } = c.req.param();

  const user = await fetchUserData(toFid);

  const pfpUrl = user.pfp_url;

  const parsedName = parseFullName(user.display_name);

  const displayName = parsedName.first || user.display_name;

  const username = user.username;

  const bio = user.profile.bio.text;

  const followers = user.follower_count;

  return c.res({
    headers: {
      "cache-control": "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0, s-maxage=0",
    },
    image: (
      <Box 
        grow 
        backgroundColor="bg" 
        flexDirection="column" 
        gap="8"
        paddingTop="48"
        paddingLeft="28"
        paddingRight="28"
        textAlign="left"
        height="100%"
        width="100%"
      >

        <Box backgroundColor="bg" flex="1" >
          <Box
            grow
            backgroundColor="bg"
            flex="1"
            flexDirection="row"
            alignItems="center"
            width="100%"
            overflow="hidden"
            position="relative"
          >
            {/* Image */}
            <img
              width="256"
              height="256"
              src={pfpUrl}
              style={{
                border: "2px solid #DDDDDD",
                borderRadius: "20px",
                objectFit: "cover",
                maxWidth: "100%",
                maxHeight: "100%",
                display: "block",
              }}
            />
            <Spacer size="24" />
            
            {/* Text Container */}
            <Box
              display="flex"
              flexDirection="column"
              alignItems="flex-start"
              flex="1"
            >
              <Text align="left" weight="500" color="grey" size="24">
                @{username}
              </Text>
              <Spacer size="6" />
  
              <Text align="left" weight="400" color="black" size="24">
                {truncate(bio, 50) + (Buffer.byteLength(bio, 'utf8') > 50 ? '...' : '')}
              </Text>
              <Spacer size="10" />
  
              <Box
                display="flex"
                flexDirection="row"
                alignItems="center"
              >
                <Text align="left" weight="500" color="black" size="24">
                  {formatNumber(followers)}
                </Text>
                <Spacer size="6" />
                <Text align="left" color="grey" size="24">
                  Followers
                </Text>
              </Box>
            </Box>
          </Box>
        </Box>

        <Spacer size="60" />
        
        <Box backgroundColor="bg" flex="1" >
          <Box
            backgroundColor="bg"
            display="flex"
            flexDirection="column"
          >
            <text 
              lang="en"
              style={{
                border: "none",
                color: "black",
                fontSize: "80px",
                fontWeight: "500",
                width: "100%",
                resize: "none",
                outline: "none",
                lineHeight: "0.9"
              }}
            >
              Pay {displayName} // the error because of this but this error will only show if I fetch user `woj.eth`
            </text>

            <Spacer size="10" />
  
            <text 
              style={{
                border: "none",
                color: "grey",
                fontSize: "52px",
                fontWeight: "400",
                width: "100%",
                resize: "none",
                outline: "none",
              }}
            >
              Pay with any token and they will receive ETH on Base.
            </text>
          </Box>
        </Box>

        <Box backgroundColor="bg" flex="1" > 
        <Box
            borderRadius="14"
            padding="14"
            background="blue"
            height="128"
            width="100%"
            justifyContent="center"
          >
            <Box flexDirection="row" alignItems="center" display="flex">
              <box style={{ transform: "rotate(-68.01deg)" }}>
                <Icon name="undo" color="white" size="60" />
              </box>
              <Spacer size="10" />
              <text 
                style={{
                  border: "none",
                  color: "white",
                  fontSize: "42px",
                  fontWeight: "500",
                  width: "100%",
                  resize: "none",
                  outline: "none",
                }}
              >
                Enter the amount and token you want to send
              </text>
            </Box>
          </Box>
        </Box>
      </Box>
    ),
  });
});