######
The code that is called in my app.app
######

struct ContentView: View {
    var body: some View {

        TabView {
            ContactsView()
                .tabItem {
                    VStack {
                        Image(systemName: "house.fill")
                        Text("Messages")
                    }
                }

            Text("Second View")
                .tabItem {
                    Image(systemName: "phone")
                    Text("Dialer")
                }

            Text("Third View")
                .tabItem {
                    Image(systemName: "star")
                    Text("Favourits")
                }

            Text("Fourth View")
                .tabItem {
                    Image(systemName: "person.2")
                    Text("Presence")
                }

            Text("Fifth View")
                .tabItem {
                    Image(systemName: "ellipsis")
                    Text("More")
                }
        }

    }
}

######
contactview
######

struct ContactsView: View {
    @State private var searchText = ""
    @State private var users: [User] = randomAccounts

    var body: some View {

            VStack {
                TenantListView(userList: users)

                ContactListView(searchText: searchText, userList: users)
            }


    }
}

######
contactlistview
######

struct ContactListView: View {
    @State private var searchText: String
    @State private var showSearchBar = false
    var userList: [User]

    init(searchText: String, userList: [User]) {
        self.searchText = searchText
        self.userList = userList
    }

    var body: some View {
        NavigationStack {
            List(searchResults, id: \.self) { username in
                if let user = userList.first(where: { $0.username == username }) {
                    NavigationLink(destination: ChatView(user: user)) {
                        HStack {
                            Image(user.imageName)
                                .resizable()
                                .frame(width: 40, height: 40)
                                .overlay(Circle().stroke(Color.gray, lineWidth: 2))

                            VStack(alignment: .leading) {
                                Text(user.username)
                                Text("\(user.number)")
                                    .font(.caption)
                            }
                        }
                    }
                    .padding(.horizontal)
                }
            }
            .listStyle(.plain)
        }

        .searchable(text: $searchText, placement: .toolbar) {
            ForEach(searchResults, id: \.self) { result in
                Text("Are you looking for \(result)?").searchCompletion(result)
            }
        }
    }

    var searchResults: [String] {
        if searchText.isEmpty {
            return userList.map { $0.username } // Return an array of usernames
        } else {
            return userList.filter { $0.username.contains(searchText) }
                          .map { $0.username } // Return an array of filtered usernames
        }
    }

}

######
tenantlistview
######

struct TenantListView: View {
    var userList: [User]

    init(userList: [User]) {
        self.userList = userList
    }
    var body: some View {
        HStack {
            ScrollView(.horizontal, showsIndicators: false) {
                HStack {
                    ToolbarItem(name: "Me")
                        .padding(.horizontal, 5)
                    ForEach(userList, id: \.username) { user in
                        ToolbarItem(name: "\(user.username)")
                    }
                }
            }
            .mask(HorizontalGradientMask())

            NavigationLink(destination: AccountDetailView()) {
                Image("avataaars")
                    .resizable()
                    .frame(width: 40, height: 40)
                    .overlay(Circle().stroke(Color.gray, lineWidth: 2))
                    .padding()
            }


        }
        .background(Color("XelionGreenish"))
    }
}