import ComponentLibrary
import Localization
import SwiftUI

struct SearchBar: View {
    @Binding var text: String
    let placeholder: String

    init(text: Binding<String>, placeholder: String) {
        self._text = text
        self.placeholder = placeholder
    }

    var body: some View {
        HStack(spacing: 8) {
            Image.Icon.search
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 16, height: 16)
                .foregroundColor(ChatConstants.Colors.Foreground.primary)
            
            TextField(placeholder, text: $text)
                .typographyV1(.workspaceTitle)
                .foregroundColor(ChatConstants.Colors.Foreground.primary)
                .tint(ChatConstants.Colors.Accent.brand)
                .textFieldStyle(.plain)
                .frame(height: 20)
        }
        .padding(.horizontal, 12)
        .padding(.vertical, 10)
        .frame(height: 40)
        .background(ChatConstants.Colors.Background.Fog.thin)
        .clipShape(.capsule)
    }
}

#Preview {
    VStack(spacing: 20) {
        SearchBar(text: .constant(""), placeholder: "Search for a Workspace")
        SearchBar(text: .constant("My Workspace"), placeholder: "Search for a Workspace")
    }
    .padding()
    .background(ChatConstants.Colors.Background.primary)
}