import SwiftUI

/// A compact rounded search box shared by the sidebar omnisearch bar and the to-do inbox
/// filters, so both read identically. Chrome matches `SidebarModeSwitcher` (the same
/// `AppTheme.surface` fill + `AppTheme.hairline` border) since the sidebar bar sits right
/// above it. Shows a magnifier, an inline text field, and a clear button once there's text.
struct SearchField: View {
    @Binding var text: String
    var placeholder: String = "Search"
    @Environment(\.appPalette) private var palette

    var body: some View {
        HStack(spacing: 6) {
            Image(systemName: "magnifyingglass")
                .font(.caption)
                .foregroundStyle(text.isEmpty ? AnyShapeStyle(.secondary) : AnyShapeStyle(palette.accent))
            TextField(placeholder, text: $text)
                .textFieldStyle(.plain)
                .font(.callout)
            if !text.isEmpty {
                Button { text = "" } label: {
                    Image(systemName: "xmark.circle.fill")
                        .font(.caption)
                        .foregroundStyle(.secondary)
                }
                .buttonStyle(.plain)
                .help("Clear the search")
            }
        }
        .padding(.vertical, 6)
        .padding(.horizontal, 8)
        .background(AppTheme.surface, in: .rect(cornerRadius: 8))
        .overlay(RoundedRectangle(cornerRadius: 8).strokeBorder(AppTheme.hairline, lineWidth: 1))
    }
}
