import SwiftUI

struct CreatorChannelTabBar: View {
    @Binding var selectedTab: CreatorChannelTab

    var body: some View {
        ScrollViewReader { proxy in
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 0) {
                    ForEach(CreatorChannelTab.allCases, id: \.self) { tab in
                        Button {
                            selectedTab = tab
                        } label: {
                            VStack(spacing: 0) {
                                Text(tab.title)
                                    .appFont(size: 16, weight: .medium)
                                    .foregroundColor(selectedTab == tab ? Color.white : Color.gray500)
                                    .frame(maxWidth: .infinity, maxHeight: .infinity)

                                Rectangle()
                                    .fill(selectedTab == tab ? Color.soda400 : Color.clear)
                                    .frame(height: 3)
                            }
                            .frame(width: 110, height: 52)
                            .contentShape(Rectangle())
                        }
                        .buttonStyle(.plain)
                        .id(tab)
                    }
                }
            }
            .onChange(of: selectedTab) { tab in
                withAnimation {
                    proxy.scrollTo(tab, anchor: .center)
                }
            }
        }
        .frame(height: 52)
        .background(Color.black)
        .overlay(alignment: .bottom) {
            Rectangle()
                .fill(Color.gray900)
                .frame(height: 1)
        }
    }
}

struct CreatorChannelTabBar_Previews: PreviewProvider {
    static var previews: some View {
        CreatorChannelTabBar(selectedTab: .constant(.home))
            .previewLayout(.sizeThatFits)
    }
}