def userProfile[Event](picture : Url, userName : String, userStatus : String) : Widget[Event] =
  row(	    
    imageUrl(url = picture)
      .size(width = 100.px, height = 100.px)
      .clip(Shapes.circle),
    column(
      text(text = userName, style = TextStyle(size = 24.sp)),
      text(text = userStatus, style = TextStyle(size = 12.sp, color = Color.Gray)),
    )
  )

def images[Event](images : List[Url]) : Widget[Event] =	  
  column(	    
    items = images.map(
      url =>
        imageUrl(url)
          .clip(Shape.roundedCorners(5.px))	
    ),
    gap = 10.px
  )

def loadingUserProfile[Event](maybeUser : Option[User]) : Widget[Event] =
  maybeUser match	
    case Some(User(picture, name, status)) =>
      userProfile(picture, name, status)
    case None =>
      loadingAnimation

final case class UserFormState(name : String, email: String, password : String)
def registrationForm[Event](formIsComplete : UserFormState => Event) : Widget[Event] =
  stateful(
    initialState = UserFormState("", "", ""),
    eventHandler = {
      case (state, NameInput(newName)) => state.copy(name = newName).eventResult
      case (state, EmailInput(newEmail)) => state.copy(email = newEmail).eventResult
      case (state, PasswordInput(newPassowrd)) => state.copy(name = newPassword).eventResult
      case (state, Submit) => formIsSomplete(state).raiseEvent
    },
    body = {
      case UserFormState(currentName, currentEmail, currentPassowrd) =>
        column(
          textInput(title = "Имя", currentValue = currentName, onChange = NameInput(_)),
          emailInput(title = "Почта", currentValue = currentEmail, onChange = EmailInput(_)),
          passwordInput(title = "Пароль", currentValue = currentPassword, onChange = PasswordInput(_)),
          subminButton(onClick = Submit)
        )
    }
  )