Choice Cards

// Choice Cards · syxUI · https://syxui.dev/components/sel-choice-cards
// 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)
    }
}

// Two big choice cards - accent border + check on the picked one (onboarding)
struct ChoiceCardsCard: View {
    @State private var selected = 0
    let accent = Color(red: 0.35, green: 0.34, blue: 0.84)
    let choices = [("person.fill", "Personal", "Just for you"),
                           ("briefcase.fill", "Business", "For your team")]
    var body: some View {
        HStack(spacing: 12) {
            ForEach(Array(choices.enumerated()), id: \.offset) { i, c in
                let on = selected == i
                VStack(alignment: .leading, spacing: 12) {
                    HStack {
                        Image(systemName: c.0).font(.system(size: 20)).foregroundStyle(on ? accent : Color.primary.opacity(0.7))
                        Spacer()
                        ZStack {
                            Circle().fill(on ? accent : Color.clear).frame(width: 20, height: 20)
                            Circle().stroke(on ? Color.clear : Color.primary.opacity(0.22), lineWidth: 1.5).frame(width: 20, height: 20)
                            if on {
                                Image(systemName: "checkmark").font(.system(size: 10, weight: .bold)).foregroundStyle(.white)
                            }
                        }
                    }
                    VStack(alignment: .leading, spacing: 2) {
                        Text(c.1).font(.system(size: 15, weight: .semibold))
                        Text(c.2).font(.system(size: 12)).foregroundStyle(.secondary)
                    }
                }
                .padding(14)
                .frame(maxWidth: .infinity, alignment: .leading)
                .background(on ? accent.opacity(0.06) : Color.clear, in: RoundedRectangle(cornerRadius: 14, style: .continuous))
                .overlay(RoundedRectangle(cornerRadius: 14, style: .continuous).stroke(on ? accent : Color.primary.opacity(0.12), lineWidth: on ? 2 : 1))
                .contentShape(Rectangle())
                .onTapGesture { withAnimation(.snappy) { selected = i } }
            }
        }.formaCard(12)
    }
}