import SwiftUI
import SFSafeSymbols

struct SearchField: View {

    @Binding
    var searchString: String

    var body: some View {
        TextField("Search", text: $searchString, prompt: Text("Search..."))
            .padding(7)
            .padding(.horizontal, 25)
            .background(Color(.systemGray5))
            .cornerRadius(8)
            .overlay(
                HStack {
                    Image(systemSymbol: .magnifyingglass)
                        .foregroundColor(.gray)
                        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                        .padding(.leading, 8)
                    if searchString != "" {
                        Button(action: {
                            self.searchString = ""
                        }) {
                            Image(systemSymbol: .multiplyCircleFill)
                                .foregroundColor(.gray)
                                .padding(.trailing, 8)
                        }
                    }
                }
            )
    }
}

struct SearchField_Previews: PreviewProvider {
    static var previews: some View {
        SearchField(searchString: .constant(""))
            .previewLayout(.fixed(width: 375, height: 50))
    }
}