Overlay va Background modifikatorlari

// ═══════════════════════════════════════
//  ODDIY OVERLAY
// ═══════════════════════════════════════
Image(systemName: "bell.fill")
.font(.title)
.overlay(alignment: .topTrailing) {
    // Badge — o'ng yuqori burchakda
    Text("3")
    .font(.caption2.bold())
    .foregroundStyle(.white)
    .padding(5)
    .background(.red)
    .clipShape(Circle())
    .offset(x: 10, y: -10)
}


// ═══════════════════════════════════════
//  MURAKKAB OVERLAY — progress bar
// ═══════════════════════════════════════
struct YuklanishKartasi: View {
    let foiz: Double  // 0...1

    var body: some View {
        RoundedRectangle(cornerRadius: 16)
        .fill(.blue.gradient)
        .frame(height: 100)
        .overlay(alignment: .bottom) {
            // Progress bar — pastda
            GeometryReader { geo in
                RoundedRectangle(cornerRadius: 4)
                .fill(.white.opacity(0.3))
                .frame(width: geo.size.width * foiz, height: 6)
            }
            .frame(height: 6)
            .padding(.horizontal, 12)
            .padding(.bottom, 12)
        }
        .overlay {
            // Matn — markazda
            Text("\(Int(foiz * 100))%")
            .font(.title.bold())
            .foregroundStyle(.white)
        }
    }
}

// ═══════════════════════════════════════
//  BACKGROUND — turli variantlar
// ═══════════════════════════════════════

// Oddiy rang
Text("Salom")
.padding()
.background(.blue)
.foregroundStyle(.white)
.clipShape(RoundedRectangle(cornerRadius: 10))

// Gradient fon
Text("Gradient")
.padding()
.background(
    LinearGradient(colors: [.purple, .pink],
    startPoint: .leading, endPoint: .trailing)
)
.clipShape(Capsule())

// Murakkab background
Text("Murakkab")
.padding()
.background {
    RoundedRectangle(cornerRadius: 12)
    .fill(.ultraThinMaterial)
    .shadow(color: .black.opacity(0.1), radius: 10, y: 5)
}

// Shape ichida background (iOS 15+)
Text("Shape")
.padding()
.background(.blue, in: RoundedRectangle(cornerRadius: 12))

// ═══════════════════════════════════════
//  KARTA DIZAYNI — overlay + background
// ═══════════════════════════════════════
struct MahsulotKartasi: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("iPhone 15 Pro")
            .font(.headline)
            Text("$999")
            .font(.title2.bold())
            .foregroundStyle(.blue)
        }
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
        // Fon — gradient + soya
        .background {
            RoundedRectangle(cornerRadius: 16)
            .fill(.background)
            .shadow(color: .black.opacity(0.08), radius: 12, y: 4)
        }
        // Ustida — "Yangi" badge
        .overlay(alignment: .topTrailing) {
            Text("YANGI")
            .font(.caption2.bold())
            .foregroundStyle(.white)
            .padding(.horizontal, 8)
            .padding(.vertical, 4)
            .background(.green, in: Capsule())
            .padding(8)
        }
        // Ustida — chegara
        .overlay {
            RoundedRectangle(cornerRadius: 16)
            .strokeBorder(.gray.opacity(0.2), lineWidth: 1)
        }
    }
}