Filter Pills

// Filter Pills · syxUI · https://syxui.dev/components/sel-filter-bar
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

extension View {
    func formaCard(_ pad: CGFloat = 18) -> some View {
        self.padding(pad)
            .background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 20, style: .continuous))
            .overlay(RoundedRectangle(cornerRadius: 20, style: .continuous).stroke(Color.primary.opacity(0.06), lineWidth: 1))
            .shadow(color: .black.opacity(0.05), radius: 14, x: 0, y: 6)
    }
}

// Filter pills - multi-select, tinted when active (Me+ purple)
struct FilterBarCard: View {
    @State private var active: Set<String> = ["Shopping", "Today"]
    let purple = Color(red: 0.52, green: 0.36, blue: 0.86)
    let rows: [[String]] = [["All", "Today", "Upcoming"], ["Shopping", "Workout"], ["Sleep", "Morning", "Focus"]]
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Filters").font(.system(size: 15, weight: .semibold))
            ForEach(Array(rows.enumerated()), id: \.offset) { _, row in
                HStack(spacing: 8) {
                    ForEach(row, id: \.self) { tag in
                        let on = active.contains(tag)
                        Text(tag)
                            .font(.system(size: 13, weight: .medium))
                            .foregroundStyle(on ? purple : Color.primary.opacity(0.65))
                            .padding(.horizontal, 14).padding(.vertical, 8)
                            .background(on ? purple.opacity(0.14) : Color.primary.opacity(0.04), in: Capsule())
                            .overlay(Capsule().stroke(on ? purple.opacity(0.45) : Color.primary.opacity(0.10), lineWidth: 1))
                            .contentShape(Capsule())
                            .onTapGesture { if on { active.remove(tag) } else { active.insert(tag) } }
                    }
                    Spacer(minLength: 0)
                }
            }
        }.formaCard()
    }
}